2

クリックしたときにナビゲーションバーをアクティブにしたい、、

これが私が使用するjqueryです

$(document).ready(function () {
        $('.navbar li').click(function(e) {
            $('.navbar li').removeClass('active');
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
        e.preventDefault();
        });         
    });

しかし、preventDefault目的のリンクに移動できないためです。ナビゲーションバーをアクティブにするだけですが、選択したリンクには移動しません。

そして、ここにリンクコードがあります：

<div class="nav-collapse collapse">
    <ul class="nav">
        <li><a href='<?php echo site_url(' tampilan ') ?>'>Knowledge Base</a>
        </li>
        <li><a href='<?php echo site_url(' ticketing/browse_ticketing ') ?>'>Ticketing</a>
        </li>
        <li><a href='<?php echo site_url(' user/logout ') ?>'>Logout</a>
        </li>
    </ul>
</div>

ナビゲーションバーを使用preventDefault()しないとアクティブになりませんが、使用すると目的のリンクに移動できません..

4

3 に答える 3

26

jQuery スクリプトを次のように変更します。

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
        $('ul.nav a').filter(function() {
             return this.href == url;
        }).parent().addClass('active');
    });
</script>
于 2013-07-19T02:55:00.087 に答える
0

Form you question, what I have got is you want to set active class to li and then redirect to some other page. If I'm understanding it right, then,

It looks like you are approaching it in a wrong way. You are trying to set active class to li first and then redirect to different page. This won't work anyway as after redirection active class will not maintained automatically.

So, Correct way is to put active class logic on target page only i.e. first navigate to the target page and there you can set active class to li.

于 2013-07-18T07:39:32.817 に答える
0

次の JavaScript を使用して、現在の URL に基づいてアクティブなクラスを追加できます

私はあなたが codeigniter で作業していると仮定しているので、 uri_string() 関数が利用可能です

$(document).ready(function () {
    var active_link = $('.navbar li a[href~="<?= uri_string() ?>"]');
    if(active_link.size() > 0) active_link.parent().parent().addClass('active');
});
于 2013-07-18T07:32:41.007 に答える