添加类或CSS：使用javascript激活

我需要一些关于JS和CSS的帮助。我正在使用JS隐藏和显示网站上某个特定导航栏中的小节。第一个问题是，我希望JS代码只适用于该导航栏，而不适用于同一站点上的许多其他导航栏。下面是JS代码：

        $('a').click(function(){
            $('section').hide();
            $($(this).attr('href')).show();
        }); 

下面是HTML代码。我想知道我是否可以使用navigation类在JS代码中只选择这个导航栏

<ul class="navigation">
    <li class="link"><a href="#content1">Tab1</a></li>
    <li class="link"><a href="#content2">Tab2</a></li>
    <li class="link"><a href="#content3">Tab3</a></li>
</ul>

---

提前非常感谢

jQuery选择字符串使用与CSS相同的语法。因此，要仅选择作为导航子项的锚定标记，可以使用

对于CSS问题，无需使用：活动选择器。只需向目标元素添加或删除类

$('.navigation a').click(function () {
  // make tabs default color
  $('.navigation a').removeclass('fancy-colors')

  // make clicked tab fancy
  $(this).addClass('fancy-colors')
})

查看jQuery toggleclass文档

在页面加载上设置默认值只意味着在标记中添加类

<a class="fancy-colors">

好的，让我们先讨论css 如果您希望链接在默认情况下处于活动状态，只需将其修改为

<ul class="navigation">
<li class="link"><a href="#content1" class="active">Tab1</a></li>
<li class="link"><a href="#content2">Tab2</a></li>
<li class="link"><a href="#content3">Tab3</a></li>

然后您可以通过JS处理rest，使用.find仅在导航中选择元素，使用.addClass和.removeClass将元素更改为活动

$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});

---

创建一个CSS类，负责设置活动元素的样式。在本例中，我们将使用class.active。重要的是要注意，这不是一个简单的问题

我们将为选项卡使用简单的HTML标记：

<ul class="tabs">
  <li>
    <a href="#">my tab</a>
  </li>
</ul>

下一步是创建一个脚本来处理选项卡上的单击。我们希望脚本从其他选项卡中删除class.active，并将其分配给刚刚单击的选项卡。为此，我们可以创建如下脚本：

$('.tabs').on('click', 'a', function () {

    var $this = $(this), $ul = $this.parents('ul');

    $ul.find('a').removeClass('active');

    $this.addClass('active');

});

实例 $'.tabs'。在“单击”“a”“函数”上{ var$this=$this， $ul=$this.parents'ul'； $ul.find'a'。删除类'active'； $this.addClass'active'； }; 身体{ 利润率：25px； } ul标签{ 利润率：0.30px0； 填充：0； 列表样式：无； } 李先生{ 显示：内联块； } ul.lia{ 边际：0.2px； 填充物：5px10px； 盒影：0 0 4pxRGBA0，0，0，4； 文字装饰：无； 背景：eee； 颜色：888； 文本转换：大写； 边界半径：4px； } ul.a:悬停{ 盒影：0.04pxRGBA0,0,0,4,0.8pxRGBA0,0,0,8； } ul.a.有效{ 背景：aaa； 颜色：fff； }

---

每个问题请回答一个问题。第一个问题请阅读jQuery API的选择器部分。对于第二个选项，将类切换为active。。再次查看jQuery中不需要查找的方法。导航a意味着只有锚是.navigationYou显然是对的，但我想展示一下他是如何在某个东西中循环某个东西的：

$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});

<ul class="tabs">
  <li>
    <a href="#">my tab</a>
  </li>
</ul>

.tabs a { // represents the tabs
  border: 1px solid #000;
}

.tabs a.active { // represents the active tabs
  background: #f00;
}

$('.tabs').on('click', 'a', function () {

    var $this = $(this), $ul = $this.parents('ul');

    $ul.find('a').removeClass('active');

    $this.addClass('active');

});