CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
CK8
CK8

Reputation: 359

How to set list item class to active Navbar

I have the following navbar code. I try to set a class of list item using jQuery doesn't work. What do I do wrong ? Please help! The following are my html code and jQuery code :

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li id="home" class="inactive">
                <a aria-expanded="false" role="button" href="Home.html"> Home</a>
            </li>
            <li id="add" class="inactive">
                <a aria-expanded="false" role="button" href="add.php">Add</a>
            </li>
            <li id="search" class="inactive">
                <a aria-expanded="false" role="button" href="search.php">Search</a>
            </li>
            <li id="admin" class="inactive">
                <a aria-expanded="false" role="button" href="setting.php">Setting</a>
            </li>
        </ul>
    </div>
</nav>

jQuery code :

<script>
$(document).ready(function(){
    $('#add').removeClass('inactive');
    $('#add').addClass('active');
});
</script>

Upvotes: 1

Views: 1673

Answers (1)

Alex Mac
Alex Mac

Reputation: 2993

Please find below mentioned solution.

$('.navbar-nav li a').click(function(e){
  e.preventDefault();
  $('.navbar-nav li').removeClass('active').addClass('inactive');
  $(this).parent('li').addClass('active');
})
.active {background:red;color:white;}
.active a{color:white}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li id="home" class="inactive">
                <a aria-expanded="false" role="button" href="Home.html"> Home</a>
            </li>
            <li id="add" class="inactive">
                <a aria-expanded="false" role="button" href="add.php">Add</a>
            </li>
            <li id="search" class="inactive">
                <a aria-expanded="false" role="button" href="search.php">Search</a>
            </li>
            <li id="admin" class="inactive">
                <a aria-expanded="false" role="button" href="setting.php">Setting</a>
            </li>
        </ul>
    </div>
</nav>

Let me know if it not works.

Upvotes: 4

Related Questions