Question

这是我的HTML：

<ul>
    <li class="rbx-tab">
        <a class="rbx-tab-heading" href="#limiteds" id="tab-limiteds">
            <span class="rbx-lead">Limiteds</span>
            <span class="rbx-tab-subtitle"></span>
        </a>
    </li>
</ul>

当有人点击限制时，如何更改以下内容：

将li class rbx-tab 更改为 rbx-tab active

谢谢！

Answer 1

使用jQuery，对于单一的李， 1.使用addClass。

$(this).parents('li').addClass('active');

要在每次点击时切换，请使用

$(this).parents('li').toggleClass('active');

对于多个li， 1.从所有li中删除活动类。 2.使用$（this）将活动类仅添加到该li。

Answer 2

使用Jquery的AddClass

＆＃13;

$("li").click(function() {
  $(this).addClass("rbx-tab active");
  alert($(this).attr("class"));

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="rbx-tab">
    <a class="rbx-tab-heading" href="#limiteds" id="tab-limiteds">
      <span class="rbx-lead">Limiteds</span>
      <span class="rbx-tab-subtitle"></span>
    </a>
  </li>
</ul>

＆＃13;

使用toggleClass

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="rbx-tab">
  <a class="rbx-tab-heading" href="#limiteds" id="tab-limiteds">
    <span class="rbx-lead">Limiteds</span>
    <span class="rbx-tab-subtitle"></span>
  </a>
</li>
</ul>

＆＃13;

有关详细信息： https://api.jquery.com/addclass/ 和 https://api.jquery.com/toggleclass/

Answer 3

我就是这样做的：

$("li a").click(function(){
    $(this).parents(".rbx-tab").toggleClass("active");
});

Here is the JSFiddle demo

Answer 4

您可以使用以下代码进行更改：

$('a .rbx-lead').click(function(){
$(this).parent().parent().addClass('active');

或更简单：

$('a .rbx-lead').click(function(){
    $(this).parents('li').addClass('active');

请在此处找到示例：

http://jsfiddle.net/AgilePlayers/q696xsdk/

Answer 5

$(".rbx-lead").click(function(){
  $(".rbx-tab").attr('class', ".rbx-tab active");
});

Answer 6

已经有很多答案，您可以使用另一个选项：

<强> HTML

<ul>
 <li class="rbx-tab"> 
    <a class="rbx-tab-heading" href="#limiteds" id="tab-limiteds">
         <span class="rbx-lead">Limiteds</span>
         <span class="rbx-tab-subtitle"></span>
    </a>
 </li>
 <li class="rbx-tab">
    <a class="rbx-tab-heading" href="#limiteds" id="tab-limiteds">
        <span class="rbx-lead">Limiteds</span>
        <span class="rbx-tab-subtitle"></span>
    </a>
 </li>
</ul>

<强> JS

在使用.removeClass()附加到remove existing class definition元素的li之后，在锚标记上注册点击事件。最后，使用.addClass()

将类添加到当前上下文

// clicking on anchor element inside li
$('li a').click(function () {
   // remove existing active class inside li elements
   $('li.rbx-tab').removeClass('active');
  // add class to current clicked element
   $(this).closest('li.rbx-tab').addClass('active');
});

DEMO

Answer 7

最简单的答案是

$('li a').click(function () {
    $('li.rbx-tab').removeClass('active');
    $(this).closest('li.rbx-tab').addClass('active');
});

使用jQuery单击更改li类

7 个答案: