带有 sIFR 的 Javascript 选项卡菜单

Question

我正在研究一个两级菜单，例如this page 上的动态驱动器示例。目标是在主导航onmouseover 下方显示一个子导航层，在一段时间后恢复到每个页面的默认子导航层。它可以工作，除了一个大问题：我在主要导航项目上使用 sIFR（<li>s 内的<a>s）。脚本逻辑不适用于 sIFRized 项目，因为它针对 <a rel=""> 标记，这些标记已被替换。

我尝试更改脚本以针对父 <li>s，但它只是搞砸了主导航。我对 Javascript 不是很先进，所以任何建议都值得赞赏！

一个想法：sIFR 是否可以替换每个导航 <a> 而不是替换每个 <li>？或者<a rel=""> 仍然不能用于菜​​单脚本？

我不喜欢这个 javascript 解决方案，实际上我使用简单的 Javascript 显示/隐藏方法尝试了我自己的一些其他方法。但是，此脚本具有我正在寻找的“恢复默认”行为。

--> Javascript menu source from Dynamic Drive

• 主要导航来源：

<div id="mainNav">
<ul>
    // rel="subnav1" shows the "subnav1" layer in the snippet below
    <li class="navLi"><a href="around-othello.php" rel="subnav1">Around Othello</a></li>

    // rel="subnav2" shows the "subnav2" layer in the snippet below
    <li class="navLi"><a href="living-here.php" rel="subnav2">Living Here</a></li>

    // rel="subnav3" shows the "subnav3" layer in the snippet below
    <li class="navLi"><a href="link-to-it.php">Link to it</a></li>

    <li class="navLi"><a href="whats-new.php">What's New</a></li>

    <li class="navLi"><a href="contact.php">Contact</a></li>

    <li class="navLi"><a href="retail.php">Retail Hub</a></li>
</ul>
</div>

• 主要导航项目的 sIFR 替换

sIFR.replace(grotesqueMT, {
selector: 'li.navLi',
tuneWidth:4,
forceSingleLine:true,
ratios:[8, 1.3, 11, 1.21, 12, 1.2, 14, 1.19, 21, 1.16, 28, 1.13, 38, 1.12, 61, 1.11, 94, 1.1, 95, 1.09, 103, 1.1, 107, 1.09, 110, 1.1, 119, 1.09, 120, 1.1, 1.09],
css: ['.sIFR-root { background-color:#5a7e92; color:#ffffff; font-size:18; }'
      ,'a { color:#ffffff; text-decoration:none; }'
      ,'a:link { color:#ffffff; text-decoration:none; }'
      ,'a:hover { color:#f0eed6; text-decoration:underline; }'
      ]
});

• 子导航源（单独的代码 sn-p）

<div id="subnav1" class="subnav">
<ul>
    <li><a href="around-othello.php">Around Othello</a></li>
    <li class="pipe"> | </li>
    <li><a href="around-othello.php?p=your-big-backyard">Your Big Backyard</a></li>
    <li class="pipe"> | </li>
    <li><a href="around-othello.php?p=explore-the-area">Explore the Area</a></li>
    <li class="pipe"> | </li>
    <li><a href="communityBuzz">Community Buzz</a></li>
</ul>
</div>

<div id="subnav2" class="subnav">
<ul>
    <li><a href="around-othello.php">Around Othello</a></li>
    <li class="pipe"> | </li>
    <li><a href="communityBuzz">Community Buzz</a></li>
</ul>
</div>

<div id="subnav3" class="subnav">
<ul>
    <li><a href="living-here.php">Living Here</a></li>
    <li class="pipe"> | </li>
    <li><a href="living-here.php?p=living-green">Living Green</a></li>
</ul>
</div>

Answer 1

说真的，省去你的麻烦，不要在这里使用 sIFR。