Question

我正在使用twitter bootstrap导航栏，我希望在我转到另一个页面时更改活动类，但它只是停留在主页上。这是母版页上的html

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav" style="font-size: medium; color: white;">
        <li class="active"><a href="Index.aspx">Home</a></li>
        <li><a href="Connect.aspx">Connect</a></li>
        <li><a href="Develop.aspx">Develop</a></li>
        <li><a href="MarketPlace.aspx">Marketplace</a></li>
        <li>
            <asp:LoginView ID="LoginView1" runat="server">
                <AnonymousTemplate>
                </AnonymousTemplate>
                <LoggedInTemplate>
                    Welcome&nbsp;<asp:LoginName ID="LoginName1" runat="server" />
                    &nbsp;
                </LoggedInTemplate>
            </asp:LoginView>
            <asp:LoginStatus runat="server"></asp:LoginStatus>
        </li>
    </ul>
</div>

我找到了一个说使用这个的答案

$('.navbar li').click(function (e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

但是我试过了它并没有用。我在那里有js文件

<script src="jquery/src/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/offcanvas.js"></script>

并且相关的css文件存在，但它仍然没有做任何事情。

Answer 1

似乎在点击链接时不使用ajax加载页面。如果是这样，那么问题是在设置'active'类之后，页面会重新加载并且它是全新的。您需要确定哪些li将在您的后端代码中处于活动状态，或者在javascript中检测您当前所在的页面。

UPD：

javascript方法看起来像那样

if (location.pathname.match(/connect.aspx/i)) $('a[href="Connect.aspx"]').parent().addClass('active')
if (location.pathname.match(/develop.aspx/i)) $('a[href="Develop.aspx"]').parent().addClass('active')

等。但这几乎就是kludge。更好的解决方案是在生成页面时将class="active"添加到所需的<li>。但我不知道你的页面是如何生成的所以我无法展示示例。如果您只使用不同的html文件，只需编辑它们，以便<li>具有active类。如果您使用模板引擎或其他内容，请使用其方法。

Answer 2

我通过覆盖CSS文件中的bootstrap下拉菜单类修复了这个问题：

.dropdown-menu > li.active > a {
    background: white !important;
    color: black !important;
}

.dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus {
    background: $navbar !important;
    color: white !important;
}

Twitter Bootstrap在主页面中将活动类添加到li

2 个答案: