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/