实施例

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');

});

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

$('.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 docs 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更改为活动

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

添加类或CSS：使用javascript激活

3 个答案:

实施例