活动链接的javascript菜单上的父链接工作，而不只是子链接 [英] Active Link on javascript menu to work on parent link not just child link

问题描述

我想完成我的网站导航。我附上jsfiddle代码，告诉你我现在有什么代码。我的问题是我的孩子链接变成灰色，当他们假设，但我想做的顶级链接，当我点击那个灰色以及。我对我的网页加上标签的方式如下

I am trying to finish up my navigation for my site. I'm attaching the jsfiddle code to show you what code I have now. My problem is my child links become gray when they are suppose to but, I want to make the top level link when I click on that gray as well. The way I have my pages labeled is like this

Page1
  Page1a
  Page1b
Page2
  Page2
.
.
.
ETC.

我需要Page1和Page2像子级别一样变灰。如果任何人可以帮助我这个我真的很感激。谢谢您的时间。

I need Page1 and Page2 to turn gray like the sublevels do. If anyone can help me with this I would really appreciate it. Thank you for your time.

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>

上一个问题在这里，但没有完全回答：
突出显示导航链接

Previous question was here, but was never answered fully: Highlight Links on Navigation

很遗憾，下面的答案都没有解决了我的问题，有些已经使它的父链接现在突出，但它使其他功能不能正常工作。我需要菜单仍然突出显示为黄色，当我悬停在一切，我需要子菜单仍然是浅蓝色，当不活动，我需要所有活动链接（父或孩子）显示他们是活跃的灰色高亮链接。有人知道解决所有这些问题的解决方案吗？

Unfortunately none of the answers below have solved my issue, some have made it so the parent link now highlights, but it makes the other features not work correctly. I need the menu to still highlight in yellow when I hover over everything, I need the submenus to still be the light blue when not active, and I need all active links(parent or child) to show the gray highlight that they are the active link. Does anyone know the solution to fix all those issues?

推荐答案

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

这篇关于活动链接的javascript菜单上的父链接工作，而不只是子链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！