Question

我有导航＆amp;一个二级导航，两者总是在展示....但我想要发生的是，当您在主导航中翻转“组合”...我希望“二级导航”点亮，例如申请一个新的课程（用可见的字体颜色）...请问这怎么办？

（当您滚动“组合”时，字体颜色在辅助导航中恢复正常）

<ul id="primarynav">
    <li><a href="">home</a></li>
    <li class="portfolio"><a href="">protfolio</a></li>
    <li><a href="">contact</a></li>
</ul>

<!-- Secondary nav -->

<ul id="secondarynav">
    <li><a href="">Websites</a></li>
    <li><a href="">Graphics</a></li>
    <li><a href="">Drawing</a></li>
</ul>

Answer 1

首先，告诉<li class="portfolio">在您悬停元素时执行方法：

<li class="portfolio" onmouseover="highlightSecundarynav();">..</li>

然后编写方法highlightSecundarynav()，将类添加到secundary nav：

function highlightSecundarynav() {
  document.getElementById("secondarynav").setAttribute("class", "highlight");
}

然后，您可以添加一些CSS规则来应用颜色或其他样式：

ul#secondarynav.highlight {
  color: #FF0000;
}

一旦鼠标离开投资组合按钮，您必须执行相同操作以删除突出显示：

<li class="portfolio" onmouseover="highlightSecundarynav();" onmouseout="unhighlightSecundarynav();">..</li>

使用Javascript：

function unhighlightSecundarynav() {
  document.getElementById("secondarynav").setAttribute("class", "");
}

Answer 2

使用jQuery：

$(document).ready(function(){
    var $primarynav = $('#primarynav'),
        $secondarynav = $('#secondarynav');

    $primarynav.hover(function(){
        $secondarynav.addClass('highlight');
    }, function(){
        $secondarynav.removeClass('highlight');
    });
});

jQuery：翻转主菜单时突出显示子菜单？

2 个答案: