我正在努力完成我网站的导航。我附上了 jsfiddle 代码以向您展示我现在拥有的代码。我的问题是我的子链接本来应该变成灰色,但是我也想在单击该灰色时创建顶级链接。我标记页面的方式是这样的
第1页
第1a页
第1b页
第2页
第2a页
.
.
.
等等。
我需要 Page1 和 Page2 像子级别一样变成灰色。如果有人可以帮助我,我将非常感激。感谢您的宝贵时间。
<script type="text/javascript">
$('#body').ready(function(){
var URL = location.pathname.split("/");
URL = URL[URL.length-1];
//<![CDATA[
for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
$('#nav ul:visible').slideUp('normal');
$('#i'+i).slideDown(0);
$('#i'+i)
.find('li')
.each( function() {
var current = $(this).find('a')[0];
if (current.href == window.location.href)
current.style.backgroundColor = "#ccc";
current.style.color = "#006";
});
}
}
});
</script>
不幸的是,下面的答案都没有解决我的问题,有些已经解决了,所以父链接现在突出显示,但它使其他功能无法正常工作。当我将鼠标悬停在所有内容上时,我需要菜单仍然以黄色突出显示,我需要子菜单在不活动时仍然是浅蓝色,并且我需要所有事件链接(父链接或子链接)以灰色突出显示它们是事件的关联。有谁知道解决所有这些问题的解决方案?
这个问题的答案可以在这篇文章中找到... Active Link on javascript menu to work on parent link not just child link
最佳答案
我重新编写了您的 jQuery,因为它看起来过于复杂。看看这个 jsfiddle 上的结果,让我知道这是否是您想要的!
$("#nav > li").click(function () {
if ( $(this).hasClass("selected") ) {
$(".selected").removeClass("selected");
} else {
$(".selected").children("ul").slideToggle();
$(".selected").removeClass("selected");
$(this).addClass("selected");
}
$(".selected").children("ul").slideToggle();
});
关于javascript - 在导航中突出显示链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17835218/