Firefox中的jQuery自定义对象参数（动态导航加载动态内容）

Question

对不起，我再次需要你的帮助:-(

我用主导航和子导航做了一个导航。子菜单将自动显示或隐藏，具体取决于主菜单中的单击选项卡/链接。

活动状态随menstr值变化。

在 IE 中完美运行 :-) 在 Firefox 中它什么也不做 :-(

我认为问题在于 Firefox 无法处理的 <a> 标签中的自定义对象属性？

这是我的 cmets 代码：

主层：

  <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 在 Navigation 上给出了实际状态。

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

感谢 Psych Half 的提示！

我做了 2 处更改，现在它在 IE 和 Firefox 中完美运行。

我认为它是一种小巧轻便的动态导航，它可以加载动态内容，并且可以在需要时处理无限的子导航。

如果有人需要这样的：

（Css 是你的一部分……）

• .active = 活动主选项卡的 Css 类
• .sub_nav_active = 活动子选项卡的 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>

子级导航（此处为 M1 的子级）： （根据需要为 sub 下的 sub 的 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 给出了导航的实际状态。

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

如果有人有问题或需要帮助，请提出。

感谢社区 :-)