jQuery的自定義對象參數（動態導航負載動態內容）

Question

對不起，我需要你的幫助再次:-(

我與主要UND子導航導航。子菜單將顯示或自動隱藏，在主菜單取決於點擊選項卡/鏈接。

由menstr值的激活狀態的改變。

在IE中它工作完美:-)在Firefox它什麼也不做:-(

我認爲問題是自定義對象屬性來自Firefox無法處理的<a>標籤？

這裏是我的代碼註釋：

主要級別：

<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：

所以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> 

我認爲一個解決辦法是給在href裏面的menstr字符串，但我認爲它不是很好...

我覺得第二個問題是沒有數據的遠程我需要確定的聯繫與一個類來處理，但我需要它的活動狀態...

非常感謝你的真正偉大的社會： - ）

Answer 1

沒有問題Phantom001 ...你的代碼工作正常..我用它擺弄..你可以得到一個不錯的子菜單效果，如果你嵌套你喜歡的子菜單此... jsFiddle link

<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> 

Answer 2

感謝精神一半的提示！

我已經做了2個改變，現在它在IE和Firefox中完美工作。

我認爲它是一個小巧輕便的動態導航，它加載動態內容，並且可以處理無限的子導航，如果你需要的話。

如果有人需要一些這樣的：

（CSS是你的一部分......）

• .active =爲活動主標籤
• .sub_nav_active = CSS類的活動子CSS類標籤

其餘的是正常的CSS樣式...

主要一級導航：

<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> 

子水位NAV（這裏M1分）： （只要你想做出許多或到menstr字符串添加更多的值下的子子）

<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：

因此，menstr給出了導航的實際狀態。

M1爲MX =活性主標籤（M1 ist的主杆的第一個選項卡）

SUB1至SUBX =的名稱AUF子導航（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 activ 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).attr('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> 

如果任何人有疑問或需要幫助請詢問。

感謝社會:-)