Question

只有最后一级被突出显示，所以我猜我的'当前'课程有问题。我希望主导航选项卡和最终导航选项卡的父级突出显示与悬停时相同。你可以在184.172.176.15/~energy看到该网站

这是HTML：

<li id="energyefficiency" class="blogbutton"><a href="#" target="_self"><span>Energy Efficiency</span></a>
                        <ul class="submenu">
                            <li id="insulation" class="subitem"><a href="EnergyEfficiency-Insulation.html" target="_self"><span>Insulation</span></a>
                                <ul class="submenu">
                                    <li id="understandinginsulation" class="subitem"><a href="EnergyEfficiency-Insulation-UnderstandingInsulation.html">Understanding Insulation</a></li>
                                    <li id="atticinsulation" class="subitem"><a href="EnergyEfficiency-Insulation-AtticInsulation.html">Attic Insulation</a></li>
                                    <li id="garageinsulation" class="subitem"><a href="EnergyEfficiency-Insulation-GarageInsulation.html">Garage Insulation</a></li>
                                    <li id="hotwatertank" class="subitem"><a href="EnergyEfficiency-Insulation-HotWaterTank.html">Hot Water Tank Insulation</a></li>
                                </ul>
                            </li>

javascript：

<script type='text/javascript' src='content/js/jquery-1.3.2.js'></script>
<script>
$(document).ready(function(){
$('#energyefficiency').addClass('current');
$('#insulation').addClass('current');
$('#atticinsulation').addClass('selecteditem');
});

</script>

CSS：

ul#css3menu li.current{
color:#1a426d;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}
ul#css3menu li:hover li.selecteditem a {
color: #fff;
background: #1a426d !important; 
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
text-decoration: none;
line-height: normal;
}

Answer 1

我在寻找类似的解决方案时偶然发现了你的问题。我发现了一个名为“Waypoints”的jQuery插件（https://github.com/imakewebthings/jquery-waypoints），也许这就是你要找的东西。

jquery用于突出显示导航中的当前项目，仅部分使用多级导航

1 个答案: