突出显示导航链接 [英] Highlight Links on Navigation

问题描述

我想完成我的网站导航。我附加了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

第1页

Page1a

Page1b

Page2

Page2a

。

。

。

ETC.

Page1
Page1a
Page1b
Page2
Page2a
.
.
.
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>

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

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?

回答这个问题可以在这篇文章找到...
有关JavaScript菜单的主动链接，无法在父链接上工作只是子链接

Answer for this problem can be found at this post... Active Link on javascript menu to work on parent link not just child link

推荐答案

我重做你的jQuery，因为它似乎过于复杂。看看这个jsfiddle的结果，让我知道这是你要做什么！

I redid your jQuery as it seemed overly complicated. Take a look at the result on this jsfiddle and let me know if that's what you were going for!

$("#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();
});

http://jsfiddle.net/PBKxy/

这篇关于突出显示导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！