0

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を使用してこれを行うにはどうすればよいですか。

ありがとうございました。

4

4 に答える 4

2

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/

于 2013-04-08T07:17:48.050 に答える
0

あなたにとって役立つかもしれません。

 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);           
  });
于 2013-04-08T07:17:12.117 に答える
0

使用できます

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

クリックイベントでクラスを追加し、クラスの使用を削除します

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

参照

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

于 2013-04-08T07:19:19.113 に答える
0

次のようにできます。

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

デモ

于 2013-04-08T07:20:50.727 に答える