Onclick on one href addClass

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

我已经尝试了很多方法，但是现在我在我的Jquery中使用了这种方法，每当我点击任何<a>时，它们都会向（.links）添加类，而这不是我正在寻找的。

我应该使用和类/ ID为每个<a>和目标他们都使用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>

来源

2017-05-28 Sam Mohamed

目标仅仅是点击的李

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

如果你想删除类的其他锚以及jQuery中

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

来源

2017-05-28 05:19:08 adeneo

第一个脚本用于添加类的工作，但第二个有关其他移除类锚点不起作用，你可以使用If和else。 –

糟糕，那里'a'消失了。现在应该工作 – adeneo

使用this选择内部锚。

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

来源

2017-05-28 05:20:10 AdhershMNair

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

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

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

 
</script>

来源

2017-05-28 05:23:20

好极了，如果点击另一个锚点去除它们又怎么样？ –

请参考附件的代码。它应该可能回答你的问题。

$('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>

来源

2017-05-28 05:30:51 Sumit

试试这个

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

来源

2017-05-28 05:40:54

尝试这个

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

来源

2017-05-28 08:57:16 mikqi

Onclick on one href addClass

回答

相关问题