code for bootstrap active nav not working

Question

please i have been trying to get this code to add class active to my nav li element but it doesnt work.

Home

    <li  id="orange">
                <a href="hotels.php"><span class="glyphicon glyphicon-bed icondeco"></span>Hotel</a>
            </li> 
            <li  id="blue">
                <a href="flights.php"><span class="glyphicon glyphicon-plane icondeco"></span>Flight</a>
            </li> 
             <li  id='red'>
                <a href="cars.php"> <span class="glyphicon glyphicon-star icondeco"></span>cars</a>
            </li>

            <li  id='green'>
                <a href="visas.php"> <span class='glyphicon glyphicon-tags icondeco'></span>Visas</a>
            </li>


            <li  id='plum'>
                <a href="vacation.php"><span class='glyphicon glyphicon-heart icondeco'></span>Vacations</a>
            </li>

            <li  id='purple'>
                <a href="corporate.php"><span class='glyphicon glyphicon-briefcase icondeco'></span>Corporate</a>
            </li>

         </ul>   

// i have this code at the bottom of the body of my page

<!-- Bootstrap Core JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script> 

 <script>


     $('.nav li').click(function(){
    $('.nav li').addClass('active').siblings().removeClass('active');
})
</script>

Answer 1

$('.nav li').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
}) 

Answer 2

You are adding active class in al list and removing the class in all lists. Thus, you need to use $(this) to add active class to your currently clicked list and remove all siblings list class:

$(this).addClass('active').siblings().removeClass('active');
//^^ instead of $('.nav li')