CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3navbar
user2831179
user2831179

Reputation: 97

Bootstrap 3 - Navbar active class

$("#houses a:contains('Houses')").parent().addClass('active');

<body id="houses">
  <li><a href="houses.php">Houses</a></li> 
</body>

When I click on the nav(houses), at the inspect element it adds the class active but it doesn't change the color of the nav. adds class but no effect.

I have been trying to follow a tutorial. It seems to work fine there, just not for me.

Upvotes: 3

Views: 34887

Answers (2)

user3254496
user3254496

Reputation: 37

<script type="text/javascript">
    jQuery(document).ready(function($){
        var url = window.location.href;
        $('.nav a[href="'+url+'"]').parent().addClass('active');
    });
</script>

Upvotes: 2

absqueued
absqueued

Reputation: 3063

Gotcha,

You are missing navbar theme class on .navbar div. Add class .navbar-default to .navbar and all done.

Updated HTML

<section class="navbar navbar-default">
                <ul class="nav navbar-nav">
                    <li><a href="index.php">New Listings</a>
                    </li>
                    <li><a href="homes.php">Houses</a>
                    </li>
                    <li><a href="land.php">Land</a>
                    </li>
                    <li><a href="mortgagecalc.php">Mortgage Calculator</a>
                    </li>
                    <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">For Pros<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li> <a tabindex="-1" href="#">Register for Caraga Homes</a>
                            </li>
                            <li class="divider"></li>
                            <li> <a tabindex="-1" href="#">Post a listing for free</a>
                            </li>
                        </ul>
                        <!-- drop down Menu -->
                    </li>
                </ul>
            </section>

And all done. Demo: http://jsfiddle.net/shekhardesigner/r2qaZ/

Upvotes: 7

Related Questions