jquery - jqueryを使用して、親ページで純粋なcss navタブをアクティブに保ちます

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

私があなたを正しく理解している場合は、次の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');
});

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、この時点でサブメニューを表示します..

あなたの状況に正確ではありませんが、うまくいけば、あなたの状況に合わせて機能させるのに役立ちます..

よろしく...

jquery - jqueryを使用して、親ページで純粋なcss navタブをアクティブに保ちます

2 に答える 2

Related

Reference