23

Twitter ブートストラップ ナビゲーション タブとナビゲーション ピルを使用しています。これは私の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>
4

7 に答える 7

29

Bootstrap のナビゲーション タブとピルは、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 を使用して読み取るソリューションを実装することができます (ファイル拡張子または処理するクエリ文字列)。

頑張ってください！:)

于 2013-04-18T00:23:21.933 に答える
3

考慮事項: 各 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>
于 2013-09-01T03:47:46.397 に答える
1

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

$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") を削除すると役立ちました。

于 2014-08-15T09:08:59.003 に答える
0

私は@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>
于 2014-12-03T14:18:55.523 に答える
0

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

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

于 2015-06-11T15:35:08.567 に答える
-1 
<?php
function activate($uri) {
    if ($_SERVER['REQUEST_URI'] == $uri) {
        echo ' class="active" ';
    }
}

?>

<nav>
    <ul class="nav nav-tabs">
      <li role="tab" <?php activate('/wikireport/index.php'); ?> ><a href="index.php" aria-controls="Home">Wiki Report</a></li>
      <li role="tab" <?php activate('/wikireport/examples.php'); ?> ><a href="examples.php" aria-controls="Examples">Examples</a></li>
      <li role="tab" <?php activate('/wikireport/about.php'); ?> ><a href="about.php" aria-controls="About">About</a></li>
    </ul>
</nav>

そして、「コンテンツ」ファイルで、navline.php を必要とする/含めるだけです。

<?php 
include('navline.php'); 
?>
于 2015-07-02T22:24:06.087 に答える