Como definir item de navbar como ativo quando o usuário o seleciona?

Question

Aug 01, 2013, 05:01 AM

twitter-bootstrap master-pages navbar asp.net

Como definir item de navbar como ativo quando o usuário o seleciona?

Eu sou um novo desenvolvedor ASP.NET Web Forms e tentando usar o Twitter Bootstrap com a página mestra. Eu estou lutando com a configuração do item navbar como ativo quando o usuário o seleciona. Eu criei minha página mestra simples seguindoeste tutorial sobre como usar o Twitter Bootstrap com o ASP.NET.

Aqui está o código da minha página mestra:

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

Então, eu adicionei este script paraa cabeça para corrigir o problema com o 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>

No entanto, nada foi alterado. Quando eu selecionei qualquer item da barra de navegação, a classe ativa não foi adicionada ao novo item selecionado e não sei por quê.Você poderia por favor me ajudar a corrigir este problema?

leaveComments