2

Bootstrap タブ/ピル プラグインに問題があります。

divすべて( a、bおよび)を表示したいcので、それらを非表示にするためのタブは必要ありません。ユーザーがページ上のあるセクションから別のセクションに移動できるようにするためのピルが必要です。問題：

  • ユーザーがリンクをクリックしても、コンテンツは表示されません (コンテナaとの例b)。
  • コンテンツの削除data-toggle="pill"が表示されますが、リンクは.activeクラスでマークされていません。

問題を示すために、このフィドルを準備しました: http://jsfiddle.net/DLRmp/。あなたが私を助けてくれることを願っています.

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="pill" href="#a">a</a></li>
    <li class=""><a data-toggle="pill" href="#b">b</a></li>
    <li class=""><a href="#c">c</a></li>
</ul>

<div id="a">I'm not working: when user clicks the link nothing happens.
    But at least link is marked as active!</div>

<div id="b">Me too. I'm not working: when user clicks the link nothing happens. 
    But at least link is marked as active! </div>

<div id="c">I'm working, but link is not marked as active!</div>
4

2 に答える 2

4

私はこのjavascriptスニペットを使用します（すべての錠剤に適用する準備ができているドキュメントにロードされています）

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});
于 2012-07-30T12:51:15.110 に答える
0

問題 1:をクリックするとhref="#c"、アクティブなクラスが追加されません。このページに投稿されたフィドルとコードでは、data-toggle="pill"属性をcリンクに追加していません。

問題 2:ブーストラップ タブの JavaScript ファイルを調べるときは、プラグインの下部にある次のコードに注意してください。

     /* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

特に の使用に注意してくださいe.preventDefault()。これが、「ピル」リンクがページ内コンテンツにジャンプしない理由だと思います。

考えられる解決策:やろうとしていることを達成する方法は他にもあると思いますが、1 つのオプションは.active、独自の jquery 関数を使用してクラスを操作することです。

http://jsfiddle.net/3aANQ/3/

$(".nav-stacked li").click(function() {
    $(".nav-stacked li").removeClass("active"); 
    $(this).addClass("active");
});​
于 2012-07-20T00:36:44.167 に答える