只有最后一个级别被突出显示,因此我猜我的“当前”课程有问题。我希望突出显示主导航选项卡和最终导航选项卡的父项,就像它们悬停时一样。
您可以在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;
}
最佳答案
我在寻找类似的解决方案时偶然发现了您的问题。我发现了一个名为“ Waypoints”(https://github.com/imakewebthings/jquery-waypoints)的jQuery插件,也许这正是您所需要的。