Jak ustawić element navbar jako aktywny, gdy użytkownik go wybierze?

Question

Aug 01, 2013, 05:01 AM

navbar master-pages twitter-bootstrap asp.net

Jak ustawić element navbar jako aktywny, gdy użytkownik go wybierze?

Jestem nowym programistą ASP.NET Web Forms i próbuję użyć Twitter Bootstrap ze stroną główną. Walczę z ustawieniem elementu navbar jako aktywnego, gdy użytkownik go wybierze. Stworzyłem moją prostą stronę wzorcową, wykonując następujące czynnościten samouczek o tym, jak korzystać z Twitter Bootstrap z ASP.NET.

Oto kod mojej strony wzorcowej:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="container">
            <div class="row-fluid">
                <div class="span12">
                    <div class="page-header">
                        <h1>Hello... My First Website with Twitter Bootstrap</h1>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span3">
                    <ul class="nav nav-list">
                        <li class="nav-header">Navigation</li>
                        <li class="active"><a href="Default.aspx">ASP.NET</a></li>
                        <li><a href="Default2.aspx">Java</a></li>
                        <li><a href="#">VB.Net</a></li>
                        <li><a href="#">C#</a></li>
                    </ul> 
                </div>
                <div class="span9">
                    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>

    </div>
    </form>
</body>
</html>

Następnie dodałem ten skrypt dogłowa w celu rozwiązania problemu z menu:

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.pathname;
        var substr = url.split('/');
        var urlaspx = substr[substr.length - 1];
        $('.nav').find('.active').removeClass('active');
        $('.nav li a').each(function () {
            if (this.href.indexOf(urlaspx) >= 0) {
                $(this).parent().addClass('active');
            }
        });
    });
</script>

Jednak nic się nie zmieniło. Kiedy wybrałem dowolny element z paska nawigacyjnego, aktywna klasa nie została dodana do nowego wybranego elementu i nie wiem dlaczego.Czy możesz mi pomóc w rozwiązaniu tego problemu?