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>

我认为一种解决方案是在 href 中提供 menstr 字符串，但我认为它不好......

我认为的第二个问题是没有数据远程我需要识别链接以处理一个类，但我需要它用于活动状态......

非常感谢它是一个真正伟大的社区:-)

4

2 回答 2

0

感谢 Psych Half 的提示！

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

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

如果有人需要这样的：

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

  • .active= 活动 Main 选项卡的 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 的子）：（根据需要创建多个，或为子下的子添加更多值到 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>

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

感谢社区:-)

于 2013-10-09T07:21:28.123 回答
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 回答