JQuery：是否可以设置 <a> 标签样式以在单击时更改？答案

【问题标题】：JQuery: is it possible to set <a> tag style to change on click?JQuery：是否可以设置 <a> 标签样式以在单击时更改？
【发布时间】：2012-06-13 00:55:16
【问题描述】：

好的 - 我知道这可能是一个很长的镜头，但我想知道：

我有一些链接到其他页面的标签，基本上我希望它们周围的样式在用户单击它们时发生变化（因此，如果用户按住鼠标按钮 3 秒钟，他们可以看到样式变化）。

到目前为止我有：

$(function() {

//MOUSE CLICK EVENTS
$('#mainmenu a').click(function() {
            $('#mainmenu li').addClass("menupressed");
});

});//END ONLOAD

但它不起作用。这可能吗？我在正确的轨道上吗？

任何建议将不胜感激！谢谢

编辑：标记为请求：

          <div class="content">
              <ul class="mainmenu">
                  <a href="page1.html"><li>Page1</li></a>
                  <a href="page2.html"><li>Page2</li></a>
                  <a href="page3.html"><li>Page3</li></a>
              </ul>    
          </div><!--content-->

【问题讨论】：

如果你想改变<a>元素的样式，你为什么要使用li选择器？此外，您可能想尝试使用mousedown 事件而不是click。
理论上这是完全可能的。就像 Juan 提到的那样，您是否故意在主菜单列表项中添加一个类？
请提供一些清晰的html

标签： jquery click styles

【解决方案1】：

根据您问题中的标记，您需要引用容器的类而不是其 id，因为它没有。

如果你想点击一下：

$('.mainmenu a').click(function() {
            $('li', this).addClass("menupressed");
});

如果鼠标按下：

$('.mainmenu a').mousedown(function() {
    $('li', this).addClass("menupressed");
});

【讨论】：

【解决方案2】：

标记无效，您不应该用内联元素包装块元素。

     <div class="content">
          <ul class="mainmenu">
              <li><a href="page1.html">Page1</a></li>
              <li><a href="page2.html">Page2</a></li>
              <li><a href="page3.html">Page3</a></li>
          </ul>    
      </div><!--content-->

您也正在使用 id 选择器选择一个类，试试这个：

$(function() {

//MOUSE CLICK EVENTS
$('.mainmenu a').click(function() {
     $(this).addClass("menupressed");
})

});//END ONLOAD

http://jsfiddle.net/KLjH3/1/

【讨论】：

【解决方案3】：

假设一个标记

<ul><li><a></li>...</ul>

$(function() {
  $('#mainmenu a').on('click', function() {
     $(this).parent().addClass("menupressed");
  });
});

【讨论】：

【解决方案4】：

click 事件在鼠标按下然后松开时触发。如果您希望能够在用户“按住鼠标按钮 3 秒”时看到更改，如您所说，您应该使用 mousedown 事件。

您可以在各自的 jquery 页面上比较这两种行为：

http://api.jquery.com/click/

http://api.jquery.com/mousedown/

但请记住，如果用户按住鼠标按钮，然后将鼠标移到锚元素之外，然后释放它，则不会点击链接。

【讨论】：

【解决方案5】：

要向您的特定 <a> 元素添加点击，只需丢失内部选择器：

$('#mainmenu a').click(function() {
  this.addClass('menupressed');
});

如果需要将该类添加到下一个<li>父元素：

$('#mainmenu a').click(function() {
  this.closest('li').addClass('menupressed');
});

这使用.closest() 方法，可在此处找到：http://api.jquery.com/closest/

【讨论】：

【解决方案6】：

当链接变为活动状态时，您可以使用 CSS 更改其样式

在此处查看示例：http://www.w3schools.com/css/tryit.asp?filename=trycss_link

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

所以 a:active 是您需要做的事情。所有需要做的造型都可以放在那里。

【讨论】：

【解决方案7】：

如果按住 3 秒，这将添加类。

已编辑以使用类

var hammertime=0;
$('.mainmenu a').bind('mousedown',function() {
    hammertime= window.setTimeout((function(elem){
     return function(){
        elem.addClass("menupressed");
     }
   })($(this).children('li')),3000) // Edit: If li is child, then use children('li')
})
.bind('mouseup',function() {
     window.clearTimeout(hammertime);
})

编辑：

还要确保将整个内容包装在其中，以便在加载时执行：

$(document).ready(function(){
   /* the code here */
});

【讨论】：