如何使邊欄活動？

Question

我有一個使用Bootsrap CSS的邊欄，但class =「active」不起作用。

此處，默認情況下，選項卡添加不處於活動狀態。 可否請你讓我知道如何使默認添加主動使用class="nav nav-sidebar"

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="col-sm-3 col-md-2 sidebar"> 
 
    <ul class="nav nav-sidebar"> 
 
    <li class="active"><a href="#">Add </a></li> 
 
    <li><a href="#">View/Modify</a></li> 
 
    <li><a href="#">Delete</a></li> 
 
    </ul> 
 
</div>

時，請在下面找到工作鏈接： enter link description here

Answer 1

你必須讓它知道你想怎麼看，一旦它的活躍。你需要一個小jQuery來爲你做主動交換。

所以在這裏我已經添加了jQuery，我的風格li.active（我也風格里一點，所以我可以我們下劃線例子）

你的HTML是一樣的，但。

$(".nav a").on("click", function() { 
 
    $(".nav").find(".active").removeClass("active"); 
 
    $(this).parent().addClass("active"); 
 
});

.nav li { 
 
    border-bottom: 3px solid rgba(0, 0, 0, 0); 
 
} 
 
.nav li:hover { 
 
    border-bottom: 3px solid #eee; 
 
} 
 
.nav li.active { 
 
    border-bottom: 3px solid #338ecf; 
 
    background: #eee 
 
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="col-sm-3 col-md-2 sidebar"> 
 
    <ul class="nav nav-sidebar"> 
 
    <li class="active"><a href="#">Add </a> 
 
    </li> 
 
    <li><a href="#">View/Modify</a> 
 
    </li> 
 
    <li><a href="#">Delete</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

我檢查你的代碼，並添加了一些類。看一下這個。 DEMO here!

HTML：

<div class="col-sm-3 col-md-2 sidebar"> 
    <ul class="nav nav-sidebar list-group"> 
    <li class="list-group-item active"><a href="#">Add </a></li> 
    <li class="list-group-item"><a href="#">View/Modify</a></li> 
    <li class="list-group-item"><a href="#">Delete</a></li> 
    </ul> 
</div> 

CSS：

li.list-group-item a:hover { 
    background-color: transparent; 
} 

li.list-group-item.active a { 
    color: #fff; 
} 

li.list-group-item.active a:hover { 
    background-color: transparent; 
} 

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { 
    background-color: #a8a8a8; 
}