使用javascript添加类或CSS：active

Question

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

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

下面是HTML代码。 我想知道是否可以使用“导航”类在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>

下一个问题与CSS有关。 我希望在网站加载时将＃content1和Tab1设为默认值-并希望将其中的文本设置为与其余颜色（红色或其他颜色）不同的颜色。 当选择了tab2时，我想改变颜色，而tab1像其他颜色一样切换为黑色。但是，我无法使：active方法在CSS中工作（我想是因为JS确实没有将其设置为活动状态。）有人可以帮我吗？ 以下是我的CSS代码（并非全部相关）。

section {
    display: none;
}

section:first-of-type {
    display:block;
}

.navigation {
    list-style: none;
}

li {
    display: inline-block;
}

.nav2 {
    display: inline-block;
    width: 100px;
    margin-right: 25px;
    margin-bottom: 25px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

提前非常感谢您！

Answer 1

创建一个CSS类，负责设计活动元素的样式。 在此示例中，我们将使用类.active 。 重要的是要注意，这不是Pseudo-Class 。

我们将为标签使用简单的HTML标记：

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

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

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

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

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

    $this.addClass('active');

});

例

 $('.tabs').on('click', 'a', function() { var $this = $(this), $ul = $this.parents('ul'); $ul.find('a').removeClass('active'); $this.addClass('active'); }); 

 body { margin: 25px; } ul.tabs { margin: 0 0 30px 0; padding: 0; list-style: none; } ul.tabs li { display: inline-block; } ul.tabs li a { margin: 0 2px; padding: 5px 10px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); text-decoration: none; background: #eee; color: #888; text-transform: uppercase; border-radius: 4px; } ul.tabs li a:hover { box-shadow: 0 0 4px rgba(0, 0, 0, .4), 0 0 8px rgba(0, 0, 0, .8); } ul.tabs li a.active { background: #aaa; color: #fff; } 

 <ul class="tabs"> <li> <a href="javascript:void(0)">tab 1</a> </li> <li> <a class="active" href="javascript:void(0)">tab 2</a> </li> <li> <a href="javascript:void(0)">tab 3</a> </li> <li> <a href="javascript:void(0)">tab 4</a> </li> <li> <a href="javascript:void(0)">tab 5</a> </li> </ul> <ul class="tabs"> <li> <a href="javascript:void(0)">tab 1</a> </li> <li> <a class="active" href="javascript:void(0)">tab 2</a> </li> <li> <a href="javascript:void(0)">tab 3</a> </li> <li> <a href="javascript:void(0)">tab 4</a> </li> <li> <a href="javascript:void(0)">tab 5</a> </li> </ul> <ul class="tabs"> <li> <a href="javascript:void(0)">tab 1</a> </li> <li> <a class="active" href="javascript:void(0)">tab 2</a> </li> <li> <a href="javascript:void(0)">tab 3</a> </li> <li> <a href="javascript:void(0)">tab 4</a> </li> <li> <a href="javascript:void(0)">tab 5</a> </li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

Answer 2

jQuery选择字符串使用与CSS相同的语法。 因此，仅选择属于导航子项的锚标记，可以使用后代选择器 。

$('.navigation a')

对于您的CSS问题，无需使用:active选择器。 只需向您的目标元素添加或删除类。

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

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

查阅jQuery toggleclass文档http://api.jquery.com/toggleclass/

在页面加载时设置默认值仅意味着将您的课程添加到标记中。

<a class="fancy-colors">

Answer 3

好吧，让我们先覆盖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>

然后用css样式

.active { your css } 

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

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