How to change active tab background color as selected tab without click?

Question

Change tab background-color when clicked it's works fine but I have the first tab active I want to make the color of it same as the selected tab and remove the color of it when another tab selected

here http://jsfiddle.net/zjjpocv6/541/

 $(function() { $('#navigation li').click(function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .selected{ background-color: blue; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul class="nav nav-tabs" role="tablist" id="navigation"> <li role="presentation" class="active" > <a href="#supervisorInfo" role="tab" data-toggle="tab">Tab 1</a> </li> <li role="presentation"> <a href="#studentsInfo" role="tab" data-toggle="tab">Tab 2</a> </li> <li role="presentation"> <a href="#reportSummary" role="tab" data-toggle="tab">Tab 2</a> </li> <li class="float-right"> <input type="submit" value="Save" class="float-right btn btn-primary" /> </li> </ul> 

Answer 1

Simply give the initially active tab the selected class:

<li role="presentation" class="active selected" >

 $(function() { $('#navigation li').click(function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .selected{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav nav-tabs" role="tablist" id="navigation"> <li role="presentation" class="active selected" > <a href="#supervisorInfo" role="tab" data-toggle="tab">Tab 1</a> </li> <li role="presentation"> <a href="#studentsInfo" role="tab" data-toggle="tab">Tab 2</a> </li> <li role="presentation"> <a href="#reportSummary" role="tab" data-toggle="tab">Tab 2</a> </li> <li class="float-right"> <input type="submit" value="Save" class="float-right btn btn-primary" /> </li> </ul> 

Answer 2

Add this CSS

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
  background-color: transparent;
}