CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapmenu
Alex
Alex

Reputation: 63

How do I get my specific menu to make the active element have a different color

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.

Upvotes: 3

Views: 290

Answers (3)

Mr Br
Mr Br

Reputation: 3901

If you want to do it with jquery, try using href selector. It goes like this:

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

You can always add some selectors before 'a' tag so it only goes for specific element or area.For example:

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

Should work like charm, only what you need to do is set this href path dynamic.

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

Of course you need to parse this url variable to correct value. Hope it helps :)

Also I seen now that you asked what does mean making active item on server side. It means that you add class "active" on item that is currently active while you generating that menu on server side(with PHP or whatever) and sending it to client side with all classes set. If menu is not static, and it's always generated by some server side language depending on menu items which are gathered from DB or any other way, while you generate menu items you can also check if current location of user is same as current menu item href, and if it is you can easily set class of this item to active.

Upvotes: 1

Nick
Nick

Reputation: 15459

There is no .navbar-inverse nested within a .navbar, so your selector isn't finding anything.

Its hard for me to test without your full set up, but try this:

$(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");
}) })

Upvotes: 1

Barbara Laird
Barbara Laird

Reputation: 12717

$(".navbar navbar-inverse navbar-static-top .navbar-inner .container .nav-collapse .nav li a") this isn't going to target what you're looking for. If you want to be as specific as you're being you need: $(".navbar.navbar-inverse.navbar-static-top .navbar-inner .container .nav-collapse .nav li a")

The spaces in the selector imply hierarchy, if you want one element with multiple classes, you leave no space between the classes. .navbar.navbar-inverse.navbar-static-top is the div with all 3 classes.

Most likely, you'd be safe targeting just .navbar instead of .navbar.navbar-inverse.navbar-static-top

Upvotes: 1

Related Questions