对不起,我再次需要你的帮助:-(
我已经做了一个带有主和子导航的导航。子菜单将自动显示或隐藏,具体取决于主菜单中的单击选项卡/链接。
活动状态随月经值而变化。
在IE中,它工作完美:-(在火狐中它什么都不做:-(
我认为问题是 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>
月经:
所以月经在导航上给出了实际状态。
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 内给月经线,但我认为这并不好......
我认为第二个问题是没有数据远程,我需要确定要与类一起处理的链接,但我需要它用于活动状态......
非常感谢,这是一个真正伟大的社区:-(
没问题 幻影001...您的代码工作正常。我正在摆弄它..如果你像这样嵌套你的子菜单,你可以得到一个很好的子菜单效果...... js小提琴链接
<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>
感谢 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 下的月经字符串中添加更多值(
<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>
月经:
所以月经给实际状态 auf 导航。
M1 到 Mx = 活动主选项卡(M1 是主栏中的第一个选项卡(
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>
如果有人有问题或需要帮助,请提出。
感谢社区:-(