3

I know that this question has been answered before, but I can't figure out how to do it with my code because of the amount of div's and the amount of classes. How can I make the active page have a different background color. I'm using a responsive twitter bootstrap (2) frame so you have to stretch the viewing window out to see all the tabs at the top.

The jsFiddle is: http://jsfiddle.net/2bhnQ/1/

My code is as follows:

<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" href="#">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="index.php">HOME</a>
        <div class="nav-collapse">
            <ul class="nav">
                <li class="dropdown">
                    <a href="people.php" class="dropdown-toggle" data-toggle="dropdown">People<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="people.php">All</a></li>
                        <li><a href="people.php#staff">Staff</a></li>
                        <li><a href="people.php#grad">Graduate Students</a></li>
                        <li><a href="people.php#undergrad">Undergraduate Students</a></li>
                        <li><a href="people.php#visitors">Visitors and Affiliates</a></li>
                        <li><a href="people.php#interns">Interns</a></li>
                        <li><a href="people.php#alumni">InfoLab Alumni</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="publications.php" class="dropdown-toggle" data-toggle="dropdown">Publications<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="publications.php">All</a></li>
                        <li><a href="publications.php#start-and-omnibase">START and Omnibase</a></li>
                        <li><a href="publications.php#question-answering">Question Answering</a></li>
                        <li><a href="publications.php#semantic">The Semantic Web</a></li>
                        <li><a href="publications.php#other">Other Publications</a></li></ul>
                </li>
                <li>
                <a href="start-system.php">How START works</a></li>
          </ul>
        </div>
    </div>
</div>

I've tried doing something like this, but it didn't work. (This is just an answer from another stackoverflow, so I guessed it would be helpful, but I can use $(location).attr('href') or any other option if it helps.)

$(document).ready(function(){
alert(window.location.pathname);
$(".navbar navbar-inverse navbar-static-top .navbar-inner .container .nav-collapse .nav li a").each(function(){
    if($(this).attr("href")==window.location.pathname)
        $(this).addClass("active");
}) })

As a novice programmer in my first month on the job, any help is greatly appreciated. Thanks.

4

3 に答える 3

1

jqueryでやりたい場合は、hrefセレクターを使ってみてください。こんなふうになります：

$(document).ready(function(){
$('a[href="publications.php#start-and-omnibase"]').css('background','red');
});

「a」タグの前にいつでもいくつかのセレクターを追加できるため、特定の要素または領域にのみ適用されます。例:

$('#menu a[href="publications.php#start-and-omnibase"]').css('background','red');

あなたがする必要があるのは、この href パスを動的に設定することだけです。

    $(document).ready(function(){
     $('a[href="'+url+'"]').addClass('active');
    });

もちろん、この url 変数を解析して値を修正する必要があります。それが役に立てば幸い ：）

また、サーバー側でアクティブなアイテムを作成することの意味を尋ねられたこともわかりました。これは、サーバー側（PHPなどを使用）でそのメニューを生成し、すべてのクラスを設定してクライアント側に送信するときに、現在アクティブなアイテムにクラス「アクティブ」を追加することを意味します。メニューが静的ではなく、DB またはその他の方法で収集されたメニュー項目に応じてサーバー側の言語によって常に生成される場合、メニュー項目を生成するときに、ユーザーの現在の場所が現在のメニュー項目の href と同じかどうかを確認することもできますである場合、このアイテムのクラスを簡単にアクティブに設定できます。

于 2013-08-01T20:26:42.670 に答える
1

.navbar-inverse内にネストされていない.navbarため、セレクターは何も見つけられません。

完全なセットアップなしでテストするのは難しいですが、これを試してください：

$(document).ready(function(){
alert(window.location.pathname);
$(".navbar .navbar-inner .container .nav-collapse .nav li a").each(function(){
    if($(this).attr("href")==window.location.pathname)
        $(this).addClass("active");
}) })
于 2013-08-01T16:51:31.657 に答える
1

$(".navbar navbar-inverse navbar-static-top .navbar-inner .container .nav-collapse .nav li a") これは、探しているものをターゲットにするつもりはありません。必要なだけ具体的にしたい場合: $(".navbar.navbar-inverse.navbar-static-top .navbar-inner .container .nav-collapse .nav li a")

セレクター内のスペースは階層を意味します。複数のクラスを持つ 1 つの要素が必要な場合は、クラス間にスペースを残しません。.navbar.navbar-inverse.navbar-static-top は、3 つのクラスすべてを含む div です。

ほとんどの場合、.navbar.navbar-inverse.navbar-static-top の代わりに .navbar だけをターゲットにしても安全です。

于 2013-08-01T16:57:26.423 に答える