0

構築中の Web サイトでは、各タブにはタブ 1、タブ 2、タブ 3 などのいずれかのクラスがあります。

私がやりたいことは、最初にタブに「cur」のクラスがあるかどうかを確認し、ある場合は残りのliをチェックして、「tab1」、「tab2」、「tab3」のいずれかの別のクラスがあるかどうかを確認することです"、"tab4" または "tab5" の場合、その "tab" クラスを body タグに追加します。

このようなものを得るために

<body class="tab2">


<div class="nav">
<ul>
    <li class="current1 tab1">First Tab</li>
    <li class="current1 cur sub tab2">Second Tab</li>
    <li class="current1 sub tab3">Third Tab</li>    
    <li class="current1 sub tab4">Fouth Tab</li>    
    <li class="current1 sub tab5">Fifth Tab</li>    
</ul></div>

以下のjQueryのようなものを試しましたが、常にtab5の追加クラスも本体に追加します

 if ( $('.navigation ul li.tab1').hasClass('cur') ) {
        $('body').addClass('tab1'); 
     } else if ( $('.navigation ul li.tab2').hasClass('cur') ) {
        $('body').addClass('tab2'); 
    } else if ( $('.navigation ul li.tab3').hasClass('cur') ) {
        $('body').addClass('tab3'); 
    } else if ( $('.navigation ul li.tab4').hasClass('cur') ) {
        $('body').addClass('tab4'); 
    } else ( $('.navigation ul li.tab5').hasClass('cur') ); {
        $('body').addClass('tab5');
    }

私はそれを行うためのよりクリーンな方法があることを知っていますが、うまくいかないようです

クラスを手動で追加できればいいのですが、HTMLにアクセスできないため、javaScriptで生成する必要があります

どんな助けでも大歓迎です

ありがとう

4

3 に答える 3

1

あなたが提供した基本のみに従ってください（jQueryUIのようなどこかからタブライブラリを使用しているかどうかは不明です）、すべてのifsなしでやっていることを非常に簡単に簡素化できます.

下記参照：

var patt = new RegExp(/tab[0-9]/),
    tabClass = "" + $(".cur").attr("class").match(patt);
$('body').removeClass("tab1 tab2 tab3 tab4 tab5")
    .addClass("" + tabClass); // the "" + is required

1 行として:

$('body').removeClass("tab1 tab2 tab3 tab4 tab5").addClass("" + $(".cur").attr("class").match(/tab[0-9]/));

jsフィドル

ワンライナーの内訳

  • $('body') jQuery セレクター - これはbody要素を取得します
  • .removeClass("tab1 tab2 tab3 tab4 tab5")は、可能なクラスを要素から削除します。クラスが要素に存在しなくてもエラーにはならないので、心配する必要はありません
  • .addClass(これにより、ボディ要素に追加するクラスの追加が開始されます
  • "" + $(".cur")ここの " は、正規表現一致の適切な文字列を返すことを保証します。もちろん、基本的な jQuery セレクターも、この場合はクラスで要素を取得しますcur
  • .attr("class")これは、クラスを含む要素のすべてのクラスを取得しようとしますcur
  • .match(/tab[0-9]/)tab ) 最後に、正規表現で使用される古い JS の match メソッドを使用して、0 から 9 までの整数で始まり、整数で終わるクラス名と、もちろん の)呼び出しの終了のみを引き出します。要素の addClass()body
于 2012-10-25T19:08:13.117 に答える
0 
$('.nav li').click(function(){
    $('.nav li').removeClass('active');
    // set the attribute of tab that was clicked as active
    $(this).attr('class', 'active');                
});

Find the jsfiddle here:http://jsfiddle.net/P5Kzr/

于 2012-10-25T19:00:09.577 に答える
0

使用する場合:

$('.navigation ul li.cur');

セレクターに一致するすべての要素の配列が返されます。その後、要素 ID ala を使用できます。

var elems=$('.navigation ul li.cur');
$('body').removeClass()
elems.each(function(){
    $('body').addClass($(this).attr('id'))
})
于 2012-10-25T18:52:27.873 に答える