Wie kann ich das Navigationselement als aktiv festlegen, wenn der Benutzer es auswählt?

Question

Aug 01, 2013, 05:01 AM

asp.net navbar master-pages twitter-bootstrap

Wie kann ich das Navigationselement als aktiv festlegen, wenn der Benutzer es auswählt?

Ich bin ein neuer ASP.NET Web Forms-Entwickler und versuche, Twitter Bootstrap mit der Masterseite zu verwenden. Ich habe Probleme damit, das Navigationsleistenelement als aktiv festzulegen, wenn der Benutzer es auswählt. Ich habe meine einfache Masterseite folgendermaßen erstelltdieses Tutorial Informationen zur Verwendung von Twitter Bootstrap mit ASP.NET.

Hier ist der Code meiner Masterseite:

<%@ 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>

Dann habe ich dieses Skript hinzugefügtder Kopf Um ein Problem mit dem Menü zu beheben:

<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>

Es wurde jedoch nichts geändert. Wenn ich ein Element in der Navigationsleiste ausgewählt habe, wurde die aktive Klasse nicht zum neu ausgewählten Element hinzugefügt, und ich weiß nicht warum.Könnten Sie mir bitte bei der Behebung dieses Problems helfen?