Question

我正在尝试为我的网站完成导航。我附上了jsfiddle代码，向您展示我现在拥有的代码。我的问题是我的孩子链接在他们想到的时候会变成灰色，但是，当我点击那个灰色时，我想做出顶级链接。我标记页面的方式就像这样

第1页
  Page1a
  Page1b
第2页
  Page2a
。
。
。
ETC.

我需要将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

Answer 1

我重新编写你的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();
});

http://jsfiddle.net/PBKxy/

Answer 2

你可以这样做： http://jsfiddle.net/gUmYP/16/

$('#nav li a').each(function(){
            $(this).css('backgroundColor', '#006');
            $(this).css('color', '#CCC');
        });
        $(this).css('backgroundColor', '#ccc');
        $(this).css('color', '#066');

Answer 3

我很确定你的控制逻辑决定哪个菜单项会在什么时候重新着色需要一些评论，因此我只更改了代码以实际更改下面的颜色。 here is the fiddle演示了在菜单项＃2上硬编码的效果。

请注意，如果location.pathname以/结尾，您可能需要引用元素URL[URL.length-2]而不是URL[URL.length-1]。

<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(idx, ex) {
                            var current = $(ex).find('a');
                            if (current.href == window.location.href) {
                                current.css({
                                      backgroundColor: '#ccc'
                                    , color:           '#006'
                                });
                                $('#i'+i).prev('a').css({
                                      backgroundColor: '#ccc'
                                    , color:           '#006'
                                });
                            }
                        });
                }
            }
        });
</script>

突出显示导航链接

3 个答案: