0

只有最后一个级别被突出显示，所以我猜我的“当前”课程有问题。我希望主导航选项卡和最终导航选项卡的父级突出显示与悬停时相同。您可以在 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;
}
4

1 回答 1

0

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

于 2013-11-24T17:02:56.927 回答