jquery - 使用 jquery 在父页面上保持纯 css 导航选项卡处于活动状态

Question

我有一个纯 CSS 下拉导航。我想强制我所在页面的标签页保持活动状态，但我不知道如何做到这一点，有人可以帮我吗？另外，您看到单独按钮的原因是因为我用图像替换它们，我只是使用颜色作为占位符。

<!DOCTYPE html>
<html>
<head>
<title>RapidCharge</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
* {margin:0;}
html{margin:0;padding:0;height:100%;}
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333;background:url(images/bg_rc.png) repeat-x top center transparent;background-color:#FFF;        margin:0;padding:0;}
img{border:none}
#nav{list-style:none;float:right;width:715px;height:52px;margin:0;padding:0;}
#nav li{float:left;padding:0;}
#nav li:hover{position:relative}
#nav a{overflow:hidden;float:left;width:141px;height:52px;text-decoration:none;}
#nav .btn-home{margin-right:2px;background-color:#006600;}
#nav .btn-about{margin-right:2px;background-color:#006600;}
#nav .btn-products{margin-right:2px;background-color:#006600;}
#nav .btn-hiw{margin-right:2px;background-color:#006600;}
#nav .btn-contact{margin-right:2px;background-color:#006600;}
#nav li:hover .btn-home{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-about{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-products{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-hiw{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-contact{background-color:#009999;}
#nav .drop{width:141px;position:absolute;top:52px;left:0;display:none}
#nav .drop ul{border-bottom:1px solid #FFF;background-color:#4b4b4b;list-style:none;position:relative;margin:0;padding:0}
#nav .drop li{float:none;position:static;vertical-align:top;line-height:20px;width:100%;margin:0;padding:0}
#nav .drop li:first-child{background:none;border:none}
#nav .drop li a{color:#FFF;border-top:1px solid #FFF;float:none;display:block;height:auto;overflow:hidden;position:relative;z-index:20;padding:0;background-color:    #4b4b4b;}
#nav .drop li:hover a,.rc-nav .drop li a:hover{text-decoration:none;background-color:#6a6a6a;}
#nav .drop li a .text{overflow:hidden;border:none;color:#FFF;cursor:pointer;padding:8px 5px 4px 13px;text-align:left;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav .drop li:hover .text,.rc-nav .drop li a:hover .text{color:#f98a1f}
#nav li:hover .drop,.rc-nav .drop li span{display:block}
</style>
</head>
<body>
<div class="rc-nav">
<ul id="nav">
<li>
<span id="home"><a class="btn-home" href="#"></a></span></li>
<li>
<span id="about"><a class="btn-about" href="#"></a></span>
<!--drop-->
<div class="drop">
<ul id="subNav">
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id="products"><a class="btn-products" href="#"></a></span>
<!--drop-->
<div class="drop">
<ul id="subNav">
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id="howitworks"><a class="btn-hiw" href="#"></a></span>
<!--drop-->
<div class="drop">
<ul id="subNav">
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id="contact"><a class="btn-contact" href="#"></a></span>
</li>
</ul>
</div>
</body>
</html>

score 0 · Accepted Answer

当您在浏览器中更改 URL 时，我还没有真正找到一种“理想”的方式来实现这一点。虽然我自己已经完成了这一点……但我是如何做到的：

请记住，我在这方面使用的是 symfony2 框架，但您也可以在常规 HTML 中做同样的事情。所以首先，我的导航：

 <!-- BEGIN NAVIGATION -->
        <nav id="nav">
            <ul class="menu collapsible shadow-bottom">
                <li><a href="{{ path('AwsAdminBundle_homepage') }}" class="{% block dashclass %}{% endblock dashclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/dashboard.png')}}">Dashboard</a></li>
                <li>
                    <a href="#" class="{% block pageclass %}{% endblock pageclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/document.png')}}">Pages</a>
                    <ul class="sub">
                        <li><a href="{{ path('pages') }}">Page Management</a></li>
                        <li><a href="#">Top Navigation</a></li>
                        <li><a href="#">Footer Navigation</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="{% block userclass %}{% endblock userclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/users.png') }}">Users</a>
                </li>
                <li>
                    <a href="#" class="{% block settingclass %}{% endblock settingclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/gear.png') }}">Settings</a>
                    <ul class="sub">
                        <li><a href="">Global Settings</a></li>
                        <li><a href="">Employee Departments</a></li>
                        <li><a href="">Employee Positions</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

所以在这里，你可以看到在导航中显示的主链接中，我有一个默认为空白的类。但是如果我传入一个类进入，那么它将显示在那里而不是在最后。我使用expand我页面中的课程...

现在我们看看 Javascript..

jQuery.fn.initMenu = function() {
    return this.each(function() {
        $('li:has(ul)', this).each(function() {
            $('>a', this).append("<span class='arrow'></span>");
        });
        $('.current', this).each(function() {
           $(this).removeClass('current');
        });

        $('.sub', this).hide();
        $('.expand', this).each(function() {
            if($(this)+':has(ul)') {
                $(this).next().show();
            }
            $(this).addClass('active current active-icon');
            $(this).removeClass('non-active-icon');
        });
        $('li.expand > .sub', this).show();
        $('li.expand > sub', this).prev().addClass('active');
        $('li a', this).click(
            function(e) {
                e.stopImmediatePropagation();
                var theElement = $(this).next();
                var parent = this.parentNode.parentNode;
                if($(this).hasClass('active-icon')) {
                    $(this).addClass('non-active-icon');
                    $(this).removeClass('active-icon');
                } else {
                    $(this).addClass('active-icon');
                    $(this).removeClass('non-active-icon');
                }
                if($(parent).hasClass('noaccordion')) {
                    if (theElement[0] == undefined) {
                        // do nothing..
                    }
                    $(theElement).slideToggle('normal', function() {
                        if ($(this).is(':visible')) {
                            $(this).prev().addClass('active');
                        }
                        else {
                            $(this).prev().removeClass('active');
                            $(this).prev().removeClass('active-icon');
                        }
                    });
                    return false;
                }
                else {
                    if(theElement.hasClass('sub') && theElement.is(':visible')) {
                        if($(parent).hasClass('collapsible')) {
                            $('.sub:visible', parent).first().slideUp('normal',
                                function() {
                                    $(this).prev().removeClass('active');
                                    $(this).prev().removeClass('active-icon');
                                }
                            );
                            return false;
                        }
                        return false;
                    }
                    if(theElement.hasClass('sub') && !theElement.is(':visible')) {
                        $('.sub:visible', parent).first().slideUp('normal', function() {
                            $(this).prev().removeClass('active');
                            $(this).prev().removeClass('active-icon');
                        });
                        theElement.slideDown('normal', function() {
                            $(this).prev().addClass('active');
                        });
                        return false;
                    }
                }
            }
        );
    });
};

这段代码中真正要看的部分是：

$('.current', this).each(function() {
               $(this).removeClass('current');
            });

            $('.sub', this).hide();
            $('.expand', this).each(function() {
                if($(this)+':has(ul)') {
                    $(this).next().show();
                }
                $(this).addClass('active current active-icon');
                $(this).removeClass('non-active-icon');
            });

首先，我current从所有导航元素中删除该类（这只是一个图形更改）。然后我确保所有子菜单都被隐藏...从这里，我运行我的类搜索expand，如果它有子菜单然后在这一点上我们显示它..

这并不完全适合您的情况，但希望它能帮助您一路走好，让它为您的工作..

问候...

score 0 · Accepted Answer

如果我理解正确，请修改以下 CSS 选择器

#nav li:hover .btn-home, #nav li .btn-home.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-about, #nav li .btn-about.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-products, #nav li .btn-products.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-hiw, #nav li .btn-hiw.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-contact, #nav li .btn-contact.active{background-color:#009999;}

然后，根据您的 URL 结构，实现某种 jQuery 以将.active类添加到适当的页面（您甚至可以使用服务器端代码）。这是未经测试的，而且效率略低，但它应该为您指明正确的方向。

var pages = {
    'home.html': '.btn-home',
    'about.html': '.btn-about',
    'products.html': '.btn-products',
    'hiw.html': '.btn-hiw',
    'contact.html': '.btn-contact'
};
$(function() {
  var filename = url.substring(url.lastIndexOf('/')+1);
  $(filename).addClass('active');
});

jquery - 使用 jquery 在父页面上保持纯 css 导航选项卡处于活动状态

2 回答 2

Related

Reference