使用Bootstrap创建垂直菜单？

Question

我正在尝试使用Bootstrap 3创建一个垂直菜单。问题是当我选择一些菜单选项时，背景不会改变颜色而且链接没有打开，我想问题是属性数据 - 肘节=“丸”。删除此属性后，链接将打开，但背景颜色不会更改。

我怎么解决这个问题？

尝试

<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');
});

这也可以通过设置class＆＃39; active＆＃39;

在服务器端使用.NET完成

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

以下是其他可能有用的Bootstrap垂直菜单示例：https://www.bootply.com/fe4AfcEnKD
https://www.bootply.com/uBoT3zP1P2