javascript - Twitter Bootstrap 在母版页中向 li 添加事件类

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 来加载页面。如果是这样，问题是在设置“事件”类后，页面会重新加载并且是全新的。您需要决定哪些 li 将在您的后端代码中处于事件状态或在 javascript 中检测，您当前在哪个页面。

更新:

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类(class)。如果您使用模板引擎或其他东西，请使用它的方法。