jquery - 更改 Jquery Tab 元素的 CSS 类

Question

我的 HTML 中有以下选项卡元素。

<section id="bill-information">
<!-- Tabbed Navigation for bills -->
<ul class="bill-tab-header">
<li class="bill-tab-button bill-tab-button-selected bill-tab-fixed-width"><a href="#tab-1"><span>OPEN</span></a></li>
<li class="bill-tab-button bill-tab-fixed-width"><a href="#tab-2"><span>SETTLED</span></a></li>
<li class="bill-tab-button bill-tab-fixed-width"><a href="#tab-3"><span>CANCEL</span></a></li>
</ul>

所选项目有一个单独的 CSS 类。我想将类更改为单击的选项卡。如何使用 JQuery 做到这一点。

谢谢你。

Answer 1

EXAMPLE

$(function() {

  var selClass= "bill-tab-button-selected";
  $('.bill-tab-header li').click(function( e ) {
    e.preventDefault();
    $(this).addClass(selClass).siblings().removeClass(selClass);
  });

});

http://api.jquery.com/event.preventDefault/
http://api.jquery.com/click/
http://api.jquery.com/addclass/
http://api.jquery.com/siblings/
http://api.jquery.com/removeclass/

Answer 2

可能对你有用。

 previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
   $(".btn").click(function () {       
    previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");                 
   $(this).addClass("course-btn-tab-selected");
   previouslyClicked = $(this);           
  });

Answer 3

您可以使用

$("#btnID").addClass("myClass yourClass");

点击事件添加类和删除类使用

$("p").removeClass("myClass noClass")

参考

http://api.jquery.com/addClass/

Answer 4

你可以这样做：

$('.bill-tab-button').click(function() {
    $(this).addClass("bill-tab-button-selected").siblings().removeClass('bill-tab-button-selected');
});

演示