Question

我有一页HTML和标题上的那些链接，每次我点击一个链接<a>，然后只有<a>将类更改为（.links）时，我需要。

我尝试了很多方法但是使用这种方法我现在在我的Jquery中使用每次点击任何<a>它们都将类添加到（.links），这不是我想要的

我是否应该为每个<a>使用and class / ID并使用Javascript / Jquery将它们全部定位，或者还有其他简单的方法吗？

<nav>
    <ul>
        <li>
            <a href="#HOME">HOME</a>
        </li>
        <li>
            <a href="#ABOUT">ABOUT US</a>
        </li>
        <li>
            <a href="#SERVICES">SERVICES</a>
        </li>
        <li>
            <a href="#TEAM">TEAM</a>
        </li>
        <li>
            <a href="#PORTFOLIO">PORTFOLIO</a>
        </li>
        <li>
            <a href="#PRICING">PRICING</a>
        </li>
        <li>
            <a href="#BLOG">BLOG</a>
        </li>
        <li>
            <a href="#CONTACT">CONTACT</a>
        </li>
    </ul>
</nav>

<script>
$('li').click(function(){
$('a').addClass('links');
});

</script>

Answer 1

仅针对点击的LI中的锚点

$('li').click(function(){
    $(this).find('a').addClass('links');
});

如果你想删除其他锚点上的类

$('li').click(function(){
    var this_one = $(this).find('a').addClass('links');
    $('li a').not(this_one).removeClass('links');
});

Answer 2

在jQuery中使用this选择器。

<script>
   $('nav ul li').click(function(){
   $('nav ul li a').removeClass('links');
   $(this).find('a').addClass('links');
   });
</script>

Answer 3

你可以在jquery中使用children() api。它也会找到你的DOM子节点。

node1

Answer 4

请查看附带的代码。它应该可以回答你的问题。

$('li').click(function(){
  $('li').not(this).each(function(index, li) {
    var anchor = $(li).find('a:first'); 
    anchor.removeClass('link');
   });
   $(this).find('a:first').addClass('link');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li>
            <a href="#HOME">HOME</a>
        </li>
        <li>
            <a href="#ABOUT">ABOUT US</a>
        </li>
        <li>
            <a href="#SERVICES">SERVICES</a>
        </li>
        <li>
            <a href="#TEAM">TEAM</a>
        </li>
        <li>
            <a href="#PORTFOLIO">PORTFOLIO</a>
        </li>
        <li>
            <a href="#PRICING">PRICING</a>
        </li>
        <li>
            <a href="#BLOG">BLOG</a>
        </li>
        <li>
            <a href="#CONTACT">CONTACT</a>
        </li>
    </ul>
</nav>

Answer 5

试试这个

$("a").click(function(){
    $(this).addClass("links");
    $("a").not($(this)).removeClass("links");
});

Answer 6

试试这个

$('li').on('click', function() {
  $('.links').removeClass('.links');
  $(this).find('a').addClass('links');
})

仅在一个href addClass上单击Onclick

6 个答案: