0

これについてはjsの助けが必要です。1ページに2つのナビゲーション、片側のナビゲーションと1つの上部のナビゲーションが連携して動作します。クリックして選択すると、サイドナビゲーションのアクティブ状態とトップナビゲーションの現在の状態が強調表示されますが、2番目と3番目のトップナビゲーションリンクをクリックすると、サイドナビゲーションのアクティブ/選択状態が削除されます。

HTMLは次のとおりです。

<div id="nav">
<ul>
  <li class="active"><a href="#SideNav1">Side Nav 1</a></li>
  <li><a href="#SideNav2">Side Nav 2</a></li>
</ul><br />

<div id="SideNav1">
  <ul>
      <li class="current">Side Nav 1 Top Nav 1</li>
      <p>Content here</p>  <br />                    
      <li><a href="#SideNav1TopNav2">Side Nav 1 Top Nav 2</a></li>  
      <p>Content here</p>  <br />              
      <li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 3</a></li>
      <p>Content here</p>    <br />             
    </ul>    
</div>

    <div id="SideNav2">
  <ul>
      <li class="current">Side Nav 2 Top Nav 2</li>
      <p>Content here</p>   <br />                  
      <li><a href="#SideNav2TopNav2">Side Nav 2 Top Nav 2</a></li>  
      <p>Content here</p>  <br />              
      <li><a href="#SideNav3TopNav3">Side Nav 2 Top Nav 3</a></li>
      <p>Content here</p>   <br />              
    </ul>    
</div>

    <div id="SideNav1TopNav2">
  <ul>
      <li><a href="#SideNav1">Side Nav 1 Top Nav 1</a></li>
      <p>Content here</p>  <br />                   
      <li class="current">Side Nav 1 Top Nav 2</li>  
      <p>Content here</p> <br />               
      <li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 3</a></li>
      <p>Content here</p>    <br />             
    </ul>    
</div>

    <div id="SideNav1TopNav3">
  <ul>
      <li><a href="#SideNav1">Side Nav 1 Top Nav 1</a></li>
      <p>Content here</p>    <br />                 
      <li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 2</a></li>  
      <p>Content here</p>  <br />              
      <li class="current">Side Nav 1 Top Nav 3</li>
      <p>Content here</p>   <br />              
    </ul>    
</div>

    <div id="SideNav2TopNav2">
  <ul>
      <li><a href="#SideNav2">Side Nav 2 Top Nav 1</a></li>
      <p>Content here</p>   <br />                  
      <li class="current">Side Nav 2 Top Nav 2</li>  
      <p>Content here</p>   <br />             
      <li><a href="#SideNav2TopNav3">Side Nav 2 Top Nav 3</a></li>
      <p>Content here</p>   <br />              
    </ul>    
</div>

    <div id="SideNav2TopNav3">
  <ul>
      <li><a href="#SideNav2">Side Nav 2 Top Nav 1</a></li>
      <p>Content here</p>    <br />                 
      <li><a href="#SideNav2TopNav3">Side Nav 2 Top Nav 2</a></li>  
      <p>Content here</p>    <br />            
      <li class="current">Side Nav 2 Top Nav 3</li>
      <p>Content here</p>     <br />            
    </ul>    
</div>

</div>

これがjsです：

$(function() {
$('#nav div').hide();
$('#nav div:first').show();
$('#nav ul li:first').addClass('active');
$('#nav ul li a').click(function(){
    var currentTab = $(this).attr('href');
    var vis = $(currentTab).is(':visible');
    $('#nav div').hide();
    $('#nav ul li').removeClass('active');
    $(this).parent().addClass('active');
    if(vis) {
        $(currentTab).hide();
    } else {
        $(currentTab).show();
    }
}); 
});

そしてCSS：

.active {
    background:#008CDC;
}
.current {
        background:#ECEDED;
}

ここの動的コード：

http://jsfiddle.net/tqhHA/79/

4

1 に答える 1

1

これは、要件を説明することで多くの成果が得られた例です。何らかの理由で、Stack Overflowコミュニティ（JavaScriptタグに続くコミュニティ）は、「私を隠して、見せて」という良い質問が大好きです。;-)私が知る限り、要件は次のとおりです。

  1. サイドナビゲーションは、メインエリアに表示されるコンテンツを決定するものとします
  2. 各メインエリアには、独自のサブナビゲーションが含まれている必要があります
  3. アクティブサイドナビゲーションは別のスタイルで示され、マークアップによって事前に選択される場合があります
  4. アクティブなサブナビゲーションは別のスタイルで示され、マークアップによって事前に選択される場合があります
  5. 私が答えで掘り下げなかった追加の要件は、簡単に次のようになります。ページに戻ったときに取得できるように、ナビゲーションとサブナビゲーションの状態を保存する必要があります（たとえば、Cookie、localstorage API、またはセッション変数を使用）。

個人的には、「タブ」が「トップナビゲーション」と呼んでいるものに行きたい方法であるが、今後「サブナビ」と呼ぶ場合は、jQueryUIを使用して簡単に移動できると思います。私の例ではjQueryUIを使用していません。

（次のサンプルのフィドルは次のとおりです：http：//jsfiddle.net/tqhHA/85/）

元のコードについて最初に注意することは、論理的なマークアップ構造がないことです。IDを持つdivは。SideNav1と同じレベルにありSideNav1TopNav2ます。それは意味がありません。次に、navそのSEEMには、サイドナビゲーションとなるはずの、2つのアイテムがありますが、名前の点では一致していません。「コンテンツ」領域では、現在のタブのクラスは「現在」（すばらしい！）ですが、コンテンツを切り替えるための独自のアンカーリンクはありません（おっと！）。

それだけでなく、無効なマークアップです（<p>要素を要素に散在させることはできません<li>。

次の方法でこれをすべてクリーンアップしましょう。

  1. 1つのメインナビゲーションがあります（元のnavリストに似ています）
  2. 「コンテンツ領域」には、常に1つの「コンテンツ」divのみが入力されます。
  3. Subnavは、メインのnavと同じパターンに従います。表示されるコンテンツを説明するリンク。それはまったく同じことで、1レベル深くネストされています。「コンテンツ」領域は、ページ自体の機能の小さなバージョンと考えてください。
  4. サンプルコードを提供するという点では、コンテンツ自体がインタラクション中に何が起こっているべきかを明らかにします

HTML：

<ul id="nav">
  <li><a href="#content1">Item 1</a></li>
  <li class="active"><a href="#content2">Item 2</a></li>
</ul>

<div id="content1" class="content">
  <ul>
    <li class="active"><a href="#tab1_1">Subnav 1</a></li>            
    <li><a href="#tab1_2">Subnav 2</a></li>               
    <li><a href="#tab1_3">Subnav 3</a></li>           
  </ul>   
  <div id="tab1_1">
    <p>This content should only be visible when Item 1 is selected from the
      main nav, and Subnav 1 is selected in the content area.</p>
  </div>
  <div id="tab1_2">
    <p>This content should only be visible when Item 1 is selected from the
      main nav, and Subnav 2 is selected in the content area. This <a href="#">fake anchor</a>
      shows that you can add anchors inside the tabs.</p>
  </div>
  <div id="tab1_3">
    <p>This content should only be visible when Item 1 is selected from the
      main nav, and Subnav 3 is selected in the content area.</p>
  </div>
</div>

<div id="content2" class="content">
  <ul>
    <li><a href="#tab2_1">Subnav 1</a></li>            
    <li><a href="#tab2_2">Subnav 2</a></li>               
    <li class="active"><a href="#tab2_3">Subnav 3</a></li>           
  </ul>   
  <div id="tab2_1">
    <p>This content should only be visible when Item 2 is selected from the
      main nav, and Subnav 1 is selected in the content area.</p>
  </div>
  <div id="tab2_2">
    <p>This content should only be visible when Item 2 is selected from the
      main nav, and Subnav 2 is selected in the content area.</p>
  </div>
  <div id="tab2_3">
    <p>This content should only be visible when Item 2 is selected from the
      main nav, and Subnav 3 is selected in the content area.</p>
  </div>
</div>

CSSも改訂されています：

  1. サイドとトップのナビゲーションについて話す場合は、サイドとトップにしましょう。役立つSOメンバーに、テキストだけでそれを理解するように依頼するつもりはありません。
  2. active両方のタイプのナビゲーションに同じクラス（）を使用できます。それらを異なるスタイルにするためにあなたがする必要があるのは具体的です
.active { background:navy; }
  .active a { color: white }

.content .active { background:yellow; }
  .content .active a { color: black; }

/* we're demoing sidebars... let's make it a SIDE bar! */
#nav, .content { float: left }
#nav { width: 100px; }
.content { width: 300px; margin-left: 24px;}

/* make the Subnav horizontal... more "tab"-like! */
.content li { display: inline-block }

OK、これでドキュメントが作成されました。これが問題です...上記のすべてが最善のアプローチではないかもしれません。ナビゲーションを容易にするために非常に多くのIDを持っていることについて警鐘が鳴ります。あなたのアプローチにぴったり合っているので、私はそれらを残しましたが、それはそれができるほどモジュール化されていません。とにかく、それが必ずしも理想的ではないが、それは機能するという記録を認めるだけです。

JSもまったく新しいものです。重要なのは、適切なHTML構造がすでに整っていれば、JSを簡単に記述できることです。インラインコメントは、私が思うに十分なドキュメントをすでに提供しているので、それを正しく理解しましょう。

var updateMain = function() {

    // just hide ALL content areas first, rather than micro-managing
    $('.content, .content div').hide();

    // with all hidden, reveal only the content areas that have become active
    var activeLinks = $('.active a');
    activeLinks.each(function() {
        var activeArea = $(this).attr('href');
        $(activeArea).show();
    });

};

$(document).ready(function() {
    updateMain();

    // Bind a click event to the all navigation items (both main and sub)
    $('#nav a, .content > ul a').on('click', function(event) {

        event.preventDefault(); // prevent default anchor behaviour

        var $parent = $(this).parent(); // jQ object of the list item containing the anchor clicked

        // only do stuff if user has not just clicked a nav that's already active
        if (!($parent.hasClass('active'))) {
            $parent.siblings().removeClass('active');
            $parent.addClass('active');
        }

        updateMain(); // with new active classes in place, show the correct content
    });
});​

つまり、ページの読み込みだけで、クリックするたびに、「アクティブな」ナビゲーションに関連するコンテンツが表示されます。クリックするだけで、「アクティブ」な変更を行い、コンテンツアップデータ機能を実行します。

免責事項：

  • ここで使用する手法を使用すると、JavaScriptが非表示を実行するため、「Flash of UnstyledContent」（FOUC）を取得できる場合があります。JavaScriptに処理させることは、アクセシビリティとSEOにとってより良いことです。しかし、FOUCを破壊するためのテクニックを研究することはできます。私はここではそれらに立ち入りませんでした。

  • うまくいけば、コンテンツがどのように構造化され、イベントがキャプチャされるかがわかります。次に、改善の機会を見つけることができます！関連するコンテンツを表示/非表示にする一般的な方法は、コンテンツをさらに別の方法で構造化することです。これにより、各リンクがコンテンツの前に表示$(this).next().show()され、たとえば、次のことができます。この猫の皮を剥ぐ方法は無数にあります。

于 2012-04-09T06:09:33.513 に答える