web-dev-qa-db-ja.com

Twitter Bootstrap Tabs active class toggle not working

Twitter bootstrap nav tabs and nav pillsを使用しています。これは私のhtmlコードです。

<div class="Header2" style="background-color:#1E3848">
    <div id="headerTab">
        <ul class="nav nav-tabs">
            <li class="active ans-tab"> <a href="http://myweb.com/">Home</a></li>
            <li class="topTab"><a href="http://myweb.com/score/">Score</a></li>
            <li class="topTab"><a href="http://myweb.com/leaderboards/">Leaderboards</a></li>
        </ul>
    </div>
    <div id="subHeaderTabPlayer">
        <ul class="nav nav-pills">
            <li class="active"> <a href="http://myweb.com/">Top</a></li>
            <li><a href="http://myweb.com/rules/" data-toggle="pill">Rules</a></li>
            <li><a href="http://myweb.com/player/" data-toggle="pill">Player</a></li>
            <li><a href="http://myweb.com/categories/" data-toggle="pill">Categories</a></li>
        </ul>
    </div>
</div>

属性data-toggle="pill"およびdata-toggle="tab"を追加すると、アクティブなクラスのタブがクリックしたものに変わります。ただし、hrefは機能しなくなりました。これらのクラスを使用しない場合、hrefは機能しますが、アクティブなクラスは変更されず、ページのロード時にクラスが与えられた要素に常にとどまります。

JQueryを使用してクラスの動作を切り替えようとしましたが、動作しません。私のスクリプトコードは次のとおりです。

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        document.getElementById( 'subHeaderTabPlayer' ).style.display = 'none';
        $('ul.nav-tabs li a').click(function (e) {
            var activeTab= document.getElementByClass('active');
            activeTab.removeAttribute("class");

            $('ul.nav-tabs li.active').removeClass('active')
            $(this).parent('li').addClass('active')
        })
        $('ul.nav-pills li a').click(function (e) {
            $('ul.nav-pills li.active').removeClass('active');
            $(this).parent('li').addClass('active');
        })
        $(".ans-tab").click(function() {
            document.getElementById('subHeaderTabPlayer').style.visibility = 'visible';
            document.getElementById('subHeaderTabPlayer' ).style.display = 'block';
        });
        $(".topTab").click(function() {
            document.getElementById('subHeaderTabPlayer').style.visibility = 'collapse';
            document.getElementById('subHeaderTabPlayer' ).style.display = 'none';
        });
    });
</script>
jqueryhtmlcsstwitter-bootstraptabs
21
CodeMonkey

ブートストラップnavタブと錠剤は、JSプラグインで動作します。プラグインはページにロードされ、現在アクティブなタブまたはピルの強調表示と記憶を処理します。他のページへのリンクをクリックすると、新しいページがロードされるため、他のページにリンクする場合はhref属性を無効にします。この新しいページに対してJSがリロードされ、どのタブまたはピルが現在アクティブであるかがわかりません。これらは、単一ページのアプリまたは同じページのアンカーへのリンクで動作するように設計されており、その目的のために正常に動作します。

JQueryアプローチも同じ理由で失敗しますが、説明しやすいかもしれません。

$('ul.nav-pills li a').click(function (e) {
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

リンクをクリックすると、JSがオフになり、クラスを変更します。次のページがロードされる前に十分な時間がある場合にのみ、リンクのhref属性がブラウザに新しいナビゲーションを指示するため、この次のページがロードされますページ。そして、新しいページは再びJSをロードします。どのタブまたはピルをアクティブにするかなど、前のページの変数を思い出せない可能性があります。

他のページに移動する場合は、ロードされている特定のページの右側のタブでアクティブクラスを設定することもできます。

クライアント側でこれを本当に行う必要がある場合は、このようなことをして、各ページにロードすることができます。

$(document).ready(function () {

  // Set BaseURL
  var baseURL = 'http://myweb.com/'

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  // Add trailing slash if not empty (empty means we're currently at baseURL)
  page = page != '' ? page + '/' : page;

  // Select link based on href attribute and set it's closest 'li' to 'active'. 
  // .siblings('.active').removeClass() is only needed if you have a default 'active li'.
  $('a[href="' + baseURL + page + '"]', '.nav li').closest('li').addClass('active').siblings('.active').removeClass();

});

URLの最後の部分に基づいてアクティブタブを設定しますが、これはユーザーのシナリオ（および以前は私のシナリオ）に固有のものです。関連するファイル拡張子またはクエリパラメータがある場合は、適応させる必要があります。すべてのページには、少なくともそれ自体へのリンクが必要です。また、他のすべてのページと同じタブとピルがレンダリングされたまったく同じヘッダーを持つことが好ましい。

これらの最後の点の両方は、「ページにレンダリングされるものを正確に制御する必要がある場合、おそらくサーバー側にアクセスできる」という考えを思い起こさせます。とにかくすべてのリンクがサーバーへの新しいリクエストを行うため、そこで修正します。また、ソリューションは、それほど堅牢ではないJavaScriptに依存する必要はありません。

だからこれは私が1つの段階で行っていたことであり、あなたはそれを改善するか、次のページにいくつかのデータを投稿し、そこでJavaScriptでそれを読むソリューションを実装することができます（おそらくファイル拡張子または処理するクエリ文字列）。

頑張ってください！ :)

28
Mathijs Flietstra

考慮すべき点：各li要素が異なるコントローラーを使用している場合、ここで試してみてください。

アクティブリンクを表示するためのTwitter-Bootstrapナビゲーションの取得方法

コードは次のようになります。

<ul class="nav nav-pills">
  <li class="<%= 'active' if params[:controller] == 'home' %>"> <a href="link" data-toggle="pill">Top</a></li>
  <li class="<%= 'active' if params[:controller] == 'rules' %>"><a href="link" data-toggle="pill">Rules</a></li>
  <li class="<%= 'active' if params[:controller] == 'player' %>"><a href="link" data-toggle="pill">Player</a></li>
  <li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="link" data-toggle="pill">Categories</a></li>
</ul>
3
syeh

この例は私のために働いた：

$leftBlock.on("click", "#navFinished", function(){
  $('ul.nav-pills li.active').removeClass('active');
  $(this).addClass('active');
});

この例は機能しませんでしたが

$leftBlock.on("click", "#navFinished", function(){
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

.parent（ "li"）を削除すると助かりました。

1
user3941146

私は@syehソリューションに従い、それを正しくしました。以下は私のコードの抜粋です。

<ul class="nav nav-pills">
   <li <?php if (strchr($this->pageTitle,' Job') === ' Job') echo 'class=active';?>><?php echo CHtml::link('JOBS', array('Job/index'));?></li>
   <li <?php if (strchr($this->pageTitle,'Artisan') === 'Artisan') echo 'class=active';?>><?php echo CHtml::link('ARTISANS', array('Artisan/index'));?></li>
   <li <?php if (strchr($this->pageTitle,'Task') === 'Task') echo 'class=active';?>><?php echo CHtml::link('TASKS',array('Task/index'));?></li>
</ul>
0
user3702201

私は同様の問題を抱えていました：クリックするとタブがアクティブになりますが、activeクラスを他のタブから適切に削除しません（つまり、ユーザーがページビューをクリックしたすべてのタブにactiveクラスがあります）。

<ol>から<ul>に切り替えると、タブが適切に動作するようになりました。

0
praniclift

これは、jQueryを使用した、より一般化されたクライアント側ソリューションです。タブにdata-toggle属性があり、タブの各グループが何らかのコンテナ要素でラップされていることを前提としています。

$('[data-toggle="tab"],[data-toggle="pill"]').click(function() { 
    $(this).parent().children('.active[data-toggle="tab"],.active[data-toggle="pill"]').removeClass('active'); 
    $(this).addClass('active'); 
});
0
kwcto