Jquery 在 Firefox 中的自定义对象参数(动态导航加载动态内容）

Jquery custom Object parameter in Firefox (dynamic Navigation load dynamic content)

本文关键字：动态 导航 加载 参数 Firefox 对象 自定义 Jquery      更新时间：2023-09-26

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

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

活动状态随月经值而变化。

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

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

感谢社区：-(

相关文章：