0

私は過去数日間探していましたが、現在直面しているすべての制約を解決する解決策を見つけることができませんでした. どんな助けでも大歓迎です。

jQuery は既にページで使用されています。

現在のシナリオ

複数のパネルを含む既存のページがあります。各パネルには、そのパネル内のレイヤーを表示/非表示するために使用される小さなナビゲーション メニュー (水平の UL リスト) があります。表示/非表示機能は意図したとおりに機能しています。

何が欠けている

クリックすると現在アクティブなメニュー項目が強調表示され、クラスを変更することで以前にアクティブだった項目が非アクティブに戻ります。

制約

  1. クラス - アクティブ/非アクティブが<a>タグに適用されます
  2. 設計は、アクティブ/非アクティブの両方のクラスが一意であるように設計されています。つまり、共通のクラス (.selected など) をハイパーリンクのグループまたはすべてに割り当てることはできません。
  3. ページにはそのようなユニークなグループが複数あり、それらを個別にターゲットにできるようにする必要があります。

jsフィドル

こちらの jsFiddle の図を参照してください。

HTML コード

私が扱っている HTML の基本ブロックは次のとおりです。

<div id="panel">
  <div id="navwrapper">
    <ul id="nav">
      <li><a href="javascript:showhide('div_1');" class="grp1_1_selected">One</a></li>
      <li><a href="javascript:showhide('div_2');" class="grp1_2">Two</a></li>
      <li><a href="javascript:showhide('div_3');" class="grp1_3">Three</a></li>
    </ul>
  </div>
  <div id="div_1" name="group1">Some content here for Div 1</div>
  <div id="div_2" name="group1">Some content here for Div 2</div>
  <div id="div_3" name="group1">Some content here for Div 3</div>
</div>

ページにはそのようなパネルが (それぞれ固有の) 複数あるため、他の同様のソリューションは機能しません。

4

3 に答える 3

1 
$('ul#nav > li > a').on('click', function() {

    $('ul#nav a').each(function() {
        $(this).attr('class', function() {
           return this.className.replace('_selected','');
        })
    });
    $(this).addClass($(this).attr('class') + '_selected');

});

これをチェックしてください：

デモ1

別のDEMO2

DEMO2 では、ul.navすべての に共通のクラスを使用してul、異なる のさまざまな id を変更できるようにしますul。

このようなものが必要だと思います。

于 2012-05-07T08:21:14.037 に答える
0

そのようなパネルが複数ある場合は、クラスを使用する必要があります

<div class="panel">
  <div class="navwrapper">
    <ul class="nav">
      <li><a class="selected">One</a></li>
      <li><a>Two</a></li>
      <li><a>Three</a></li>
    </ul>
  </div>
  <div class="panel_content">Some content here for Div 1</div>
  <div class="panel_content">Some content here for Div 2</div>
  <div class="panel_content">Some content here for Div 3</div>
</div>

このコードを使用してそれらを処理できます。

  $('.panel').each(function() {
     var panel = $(this);
     var a = $(this).find('.nav a').click(function() {
        panel.find('.panel_content').eq(a.index(this)).show().
           siblings('.panel_content').hide();
        $(this).addClass('selected').parent().siblings().
           children().removeClass('selected');
     });
  });

すべてのパネルで機能します

于 2012-05-07T08:22:57.887 に答える
0

jQuery を使用する場合、js 関数を href タグに追加しないでください。私のデモでより良い解決策を確認してください。

$(document).ready(function() {
$('#nav li a').on('click', function() {
    var target = $(this).attr('href').substring(1).split('-');
    $('a.group'+target[0]).removeClass('selected');
    $(this).addClass('selected');
    $('div.group'+target[0]).hide();
    $('div#div_'+target[1]+'.group'+target[0]).show();
}); 
});​

ご了承ください

  1. リンクには、特定のコンテンツをブックマークするために使用できるアンカー (例: #1-2) のみが含まれます。(追加の js が必要です。)
  2. CSS は引き続き各タブの画像を表示できます。
于 2012-05-07T08:23:50.523 に答える