Question

抱歉，我再次需要你的帮助： - （

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

活动状态按月值改变。

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

感谢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的字符串添加更多值）

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

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

感谢社区： - ）

Answer 2

没有问题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>

Firefox中的Jquery自定义Object参数（动态导航加载动态内容）

2 个答案: