如何在不单击的情况下将活动标签背景颜色更改为选定标签

Question

单击时更改选项卡背景颜色它工作正常但我有第一个选项卡激活我想使其颜色与所选选项卡相同，并在选择另一个选项卡时删除它的颜色

此处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

只需将最初有效的标签提供给selected类：

<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

添加此CSS

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