javascript菜单上的活动链接可以处理父链接，而不仅仅是子链接

Active Link on javascript menu to work on parent link not just child link

本文关键字：链接 不仅仅是 处理 菜单 活动 javascript      更新时间：2023-09-26

我正在努力完成我的网站导航。我附上jsfiddle代码，向您展示我现在拥有的代码。我的问题是，当我的子链接被认为是灰色的时候，它们会变成灰色，但是，我想当我点击灰色时，也会变成顶级链接。我给页面贴标签的方式就像这个

Page1
  Page1a
  Page1b
Page2
  Page2
.
.
.
ETC.

我需要第1页和第2页像子页面一样变成灰色。如果有人能帮我，我将非常感谢。谢谢你抽出时间。

http://jsfiddle.net/gUmYP/

<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>

之前的问题在这里，但从未得到完全回答：在导航上突出显示链接

不幸的是，下面的答案都没有解决我的问题，有些已经解决了，所以父链接现在突出显示，但它使其他功能无法正常工作。当我悬停在所有内容上时，我需要菜单仍以黄色突出显示，当不活动时，我希望子菜单仍为浅蓝色，并且我需要所有活动链接（父链接或子链接）以灰色突出显示它们是活动链接。有人知道解决所有这些问题的方法吗？

看看这个JSFiddle。

$('#nav li a').click(
   (...)
   // Here I removed the "active" class from all siblings "li"
   $(this).parent().siblings().removeClass("active");
   (...)
   // Here I add the "active" class to this "li"
   $(this).parent().addClass("active");
   (...)
)

注1：新的JSFiddle

相关文章：