¿Cómo configurar el elemento de la barra de navegación como activo cuando el usuario lo selecciona?

Question

Aug 01, 2013, 05:01 AM

navbar master-pages twitter-bootstrap asp.net

¿Cómo configurar el elemento de la barra de navegación como activo cuando el usuario lo selecciona?

Soy un nuevo desarrollador de formularios web de ASP.NET y trato de usar Twitter Bootstrap con la página maestra. Estoy teniendo problemas para configurar el elemento de la barra de navegación como activo cuando el usuario lo selecciona. He creado mi página maestra simple siguiendoeste tutorial sobre cómo usar Twitter Bootstrap con ASP.NET.

Aquí está el código de mi página maestra:

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

Luego, agregué este script ala cabeza Para solucionar el problema con el menú:

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

Sin embargo, nada ha sido cambiado. Cuando seleccioné cualquier elemento de la barra de navegación, la clase activa no se ha agregado al nuevo elemento seleccionado y no sé por qué.¿Podría por favor ayudarme a solucionar este problema?