JavaScript的菜单对父链接不只是孩子联系工作的积极链接(Active Link on jav

2019-10-29 15:32发布

我想完成我的导航为我的网站。 我附加了的jsfiddle代码来告诉你什么样的代码我现在有。 我的问题是我的孩子链接变成灰色,当他们猜想,但是,我想使顶层链接时,我对灰色点击为好。 我有我的标记网页的方式是这样的

Page1
  Page1a
  Page1b
Page2
  Page2
.
.
.
ETC.

我需要1和Page 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>

前一个问题在这里,但从来没有完全回答: 在导航高亮链接

遗憾的是没有下面的答案已经解决了我的问题,有些人说得那么父链接现在突出,但它使其他功能无法正常工作。 我需要的菜单仍然在黄色突出显示,当我将鼠标悬停在了一切,我需要的子菜单时不活跃仍然是淡蓝色的,我需要的所有活动链接(父母或子女),以显示灰色的亮点,他们是活跃的链接。 有谁知道的解决方案来解决所有这些问题?

Answer 1:

看看这个的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



文章来源: Active Link on javascript menu to work on parent link not just child link