0

申し訳ありませんが、もう一度あなたの助けが必要です:-(

メインとサブのナビゲーションでナビゲーションを作成しました。サブメニューは、メインメニューのクリックタブ/リンクに応じて、自動的に表示または非表示になります。

活性状態はmenstr値によって変化します。

IEでは完璧に動作します:-) Firefoxでは何もしません:-(

<a>問題は、 Firefox が処理できないタグのカスタム オブジェクト属性だと思いますか?

コメント付きの私のコードは次のとおりです。

メインレベル:

  <ul>
  <li><a id="M1" data-remote="true" menstr="M1:Sub1:S2" href="start1.php">Start1</a></li>
  <li><a id="M2" data-remote="true" menstr="M2:0:S0" href="start2.php">Start2</a></li>
  </ul>

サブレベル:

<div id="Sub1" class="subv"  style="display:none">
<ul>
<li><a id="S1" data-remote="true" menstr="M1:Sub1:S1" href="sub1.php">Sub1</a></li>
<li><a id="S2" data-remote="true" menstr="M1:Sub1:S2" href="sub2.php">Sub2</a></li>
</ul>
</div>

月経:

したがって、menstr はナビゲーションの実際の状態を示します。

M1 から Mx = アクティブなメイン タブ (M1 はメイン バーの最初のタブ)

Sub1 ～ Subx = サブ ナビゲーションの名前 (0 = サブ バーなし)

S1 ～ Sx = アクティブなサブタブ

ページの下部にある jQuery / Java:

 <script>

 // Look if <a> is clicked and data-remote is true
 $('a[data-remote]').click(function(e) {

 // Prevent Default Action
 e.preventDefault()

  //Remove activ state/class from all Main Tabs
 $('.active').removeClass('active');

 //Remove active state/class from all Sub Tabs
 $('.sub_nav_active').removeClass('sub_nav_active');

 //Hide the Sub Tab
 $('.subv').hide();

 // Get and split the menstr
 var $menstr = this.menstr.split(':');

 //Set Main tab active
 $('#' + $menstr[0]).addClass('active');

 //Set Sub tab active
 $('#' + $menstr[2]).addClass('sub_nav_active');

//Show Sub div if some is there
$('#' + $menstr[1]).show();

// Load the content of href in the main div
$('#main').load(this.href);

});
</script>

1つの解決策は、href内にmenstr文字列を与えることだと思いますが、それは良くないと思います...

私が思う2番目の問題は、data-remoteがないことです。クラスで処理するリンクを特定する必要がありますが、アクティブな状態のために必要です...

本当に素晴らしいコミュニティに感謝します:-)

4

2 に答える 2

0

問題ありません Phantom001... あなたのコードは正常に動作しています..そして私はそれをいじっていました..このようにサブメニューをネストすると、素敵なサブメニュー効果を得ることができます... jsFiddle リンク

<ul>
<li>
     <a id="M1" data-remote="true" menstr="M1#Sub1#S2" href="start1.php">Start1</a>
    <div id="Sub1" class="subv"  style="display:none">
       <ul>
       <li><a id="S1" data-remote="true" menstr="M1#Sub1#S1" href="sub1.php">Sub1</a></li>
       <li><a id="S2" data-remote="true" menstr="M1#Sub1#S2" href="sub2.php">Sub2</a></li>
     </ul>
     </div>
</li>

 <li>
<a id="M2" data-remote="true" menstr="M2#Sub2#X1" href="start2.php">Start2</a>


  <div id="Sub2" class="subv"  style="display:none">
 <ul>
   <li><a id="X1" data-remote="true" menstr="M2#Sub2#X1" href="sub3.php">Sub3</a></li>
 </ul>
 </div>
     </li>

     </li>

 </ul>
于 2013-10-09T09:31:55.560 に答える