在导航选项卡上切换为活动状态

toggle active on nav-tabs

本文关键字：活动状态 导航 选项      更新时间：2023-09-26
$('.active').click(function() {
    $(this).toggleClass('active');
    $(this).toggleClass('active');
});

我知道这是完全错误的，但我是新来的，并试图学习;我要做的是切换<li>的活动类onclick()非常感谢任何帮助。谢谢。

<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>

您需要创建一个函数toggleClass

JS

创建一个新的toggleClass函数，它将接受当前被点击的元素

function toggleClass(elem) {
  $(elem).toggleClass('active');
};

为onclick处理器增加toggleClass功能&传递当前元素作为参数

  <li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS

创建类.active 

.active {
  background: yellow;
}

你需要做的是将所有其他元素的类设置为inactive， 

$('.active').className = 'inactive';
$(this).className = 'active';

上面的表达式会影响所有带有这个类的元素，下面的表达式会改变当前被点击的元素

try this:

$("nav li").click(function() {
  $(this).toggleClass("active");
});

仅适用于<li>元素且active类

$("nav li.active").click(function() {
  $(this).toggleClass("active");
});

这不是Bootstrap应该如何工作。如果你正在使用bootstrap，使用他们的tab js组件。更多信息在这里

基本上你像这样在这些LI标签上添加一个监听器:(来自文档)

$('.nav.nav-tabs li').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

你所做的，你切换状态两次，所以最后它会保持不变。

我认为，而不是$('.active').click(function())，你应该瞄准li点击

$( "li" ).click(function() {
  $(this).toggleClass("active");
});

小提琴:http://jsfiddle.net/wVVbT/142/

这里有一个关于如何使用。toggleclass 的链接。

toggleClass:根据类的存在或state参数的值，在匹配元素集中的每个元素中添加或删除一个或多个类。

<标题>演示:

$('li').click(function() {
  $(this).toggleClass('active');
})
ul li{
  float: left;
  margin-right: 20px;
  }
.active {
  background: #69a;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li> Link A</li>
  <li>Link B</li>
  </ul>

相关文章：