タブ付きのdivを表示している間、別のビジュアルボタン

Question

リストアイテムをクリックすると、現在アクティブなリストアイテムであることを示すためにリストアイテムを交互に切り替える方法はありますか？これは、ボタンをクリックすると、divが表示されている間にハイライト表示されるように、これをブートストラップでいくつかの方法（ブートストラップマニュアルを無駄にする）で行うことができれば理想的です。ここでは、アクティブのdivの表示のない、実施例である：あなたが好きな何かができる

<ul id="ul-menu-list"> 
    <li id="tabone">How it Works</li> 
    <li id="tabtwo">Features</li> 
    <li id="tabthree">FAQ</li> 
</ul> 
<di id="box-one" class="box">Tab one</di> 
<di id="box-two" class="box">Tab two</di> 
<di id="box-three" class="box">Tab three</di> 

<script> 
$("#ul-menu-list li").click(function() { 
    $('.box').hide().eq($(this).index()).show(); 
}); 
</script> 

Answer 1

：

添付

http://jsfiddle.net/Bala_chandran/opdzhzzz/2/

は、所望の結果の画像

コードですthis ...

「アクティブ」アイテムのCSSに新しいクラスを追加：

.red { background: red; } 

はその後、クラスを適用するためのjQueryを調整：はい...実際には、方法あなたはあなたを助けるあなたのjQueryを使用している

$("#ul-menu-list li").click(function() { 
    $("#ul-menu-list li").removeClass('red'); /* removes any existing red */ 
    $(this).addClass('red'); /* adds red to clicked item */ 
    $('.box').hide().eq($(this).index()).show(); 
}); 

Updated Fiddle here

Answer 2

。あなたがする必要があるのは、クリックされるとすべてのLIから「選択された」クラスを削除することだけです。次に、選択したクラスにクラスを戻します。

$("#ul-menu-list li").click(function() { 
    $('#ul-menu-list li').removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.box').hide().eq($(this).index()).show(); 
}); 

次に、「選択された」クラスのスタイルを設定します。そして、あなたはまた、手動でこのような背景を持つように最初に表示タブを可能にするために最初のLI要素にこのクラスを追加することができます。

.selected { 
    background: red; 
} 

http://jsfiddle.net/opdzhzzz/142/

Answer 3

$("#ul-menu-list li").click(function() { 
 
    $("#ul-menu-list li").removeClass('active'); /* remove 'active' class from all li's */ 
 
    $(this).addClass('active'); /* add active class to clicked li */ 
 
    $('.box').hide().eq($(this).index()).show(); 
 
});

#ul-menu-list li.active { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul id="ul-menu-list"> 
 
    <li id="tabone" class="active">How it Works</li> 
 
    <li id="tabtwo">Features</li> 
 
    <li id="tabthree">FAQ</li> 
 
</ul> 
 
<di id="box-one" class="box">Tab one</di> 
 
<di id="box-two" class="box">Tab two</di> 
 
<di id="box-three" class="box">Tab three</di>