Question

I have a nav & a secondary nav, both always on show.... but want I want to happen is, when you rollover "portfolio" in the main nav... I would like the "secondary nav" to light up e.g. apply a new class (with amore visible font colour)... how can this be done please?

(当你从“组合”开始时,字体的颜色又回到次地的正常状态)

<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

Us:

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

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

Answer 2

首先,<li category=“portfolio”>,以便在你掌握以下要素后采用一种方法:

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

之后,将撰写以下方法:highlightSecundarynav(,其中将这几类内容添加到小部分:

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

之后,你可以添加一些特别安全局规则,以适用肤色或其他风格:

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

一旦修改后将项目组合重新排出,你必须做同样的工作,删除重点内容:

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

Javascript:

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

友情链接