在nav-tabs上切换激活

Question

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

我知道这是完全错的，但我是新人并且正在努力学习;我要做的是切换<li> onclick()的活跃课程真的很感激任何帮助。三江源。

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

Answer 1

我认为您应该将$('.active').click(function())点击为

，而不是li

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

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

Answer 2

以下是关于如何使用.toggleClass 的说明link。

toggleClass：在匹配元素集中的每个元素中添加或删除一个或多个类，具体取决于类的存在或状态参数的值。

样本：

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

Answer 3

您需要创建一个函数toggleClass

<强> JS

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

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

<强> HTML

将toggleClass函数添加到onclick处理程序＆amp;将当前元素作为参数传递

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

<强> CSS

创建课程.active

.active {
  background: yellow;
}

DEMO

Answer 4

您需要做的是将所有其他元素的类设置为非活动状态

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

该顶部表达式将影响具有该类的所有元素，而底部表达式将更改当前单击的元素。

Answer 5

试试这个：

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

仅适用于<li>类

的active元素

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

Answer 6

这不是Bootstrap应该如何工作的。如果您使用的是bootstrap，请使用其tab js组件。更多信息here

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

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

你做的方式是，你把状态翻了两次，最后保持不变。