Question

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

我有一些链接到其他页面的标签，基本上我希望它们的样式在用户点击它们时改变（因此如果用户按住鼠标按钮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-->

Answer 1

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

如果您想点击：

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

如果在mousedown：

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

Answer 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/

Answer 3

假设有标记

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

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

Answer 4

按下鼠标按钮然后释放时会触发click事件。如果您希望能够在用户“按住鼠标按钮3秒钟”时看到更改，则应使用mousedown事件。

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

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

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

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

Answer 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/

Answer 6

如果持续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 */
});

Answer 7

您可以使用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是你需要做的事情。所有需要完成的样式都可以放在那里。

JQuery：是否可以设置<a> tag style to change on click?</a>

7 个答案: