创建带引导带的垂直菜单？

Question

我正在尝试使用Bootstrap 3创建一个垂直菜单，问题是当我选择菜单的某个选项时，背景不会改变颜色，链接也不会打开，我猜问题在于属性数据切换=“pill”。当我删除这个属性时，链接会被打开，但是背景的颜色不会改变。

我怎么能解决这个问题？

正在尝试

<div class="panel panel-red">
        <div class="panel-body">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="@Url.Action("Index", "Home")" data-toggle="pill" class="glyphicon glyphicon-home"> Home</a></li>
                <li class="active"><a href="@Url.Action("Index", "Estado")" class="glyphicon glyphicon-align-justify"> Estados</a></li>
                <li><a href="@Url.Action("Index", "Condado")" class="glyphicon glyphicon-th"> Condados</a></li>
                <li><a href="#" class="glyphicon glyphicon-user"> Usuários</a></li>
            </ul>
        </div>
    </div>

​

​

Answer 1

您需要一些方法来更改active类。比如用jQuery..。

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

这也可以通过设置类'active‘在服务器端使用.NET完成。

https://www.codeply.com/go/GvqxoWYMVU

下面是引导垂直菜单的其他示例，可能会有所帮助：https://www.bootply.com/fe4AfcEnKD

https://www.bootply.com/uBoT3zP1P2