Comment définir l'élément de la barre de navigation comme actif lorsque l'utilisateur le sélectionne?

Je suis un nouveau ASP.NET développeur Web Forms et l'utilisation de Twitter Bootstrap avec la Page Maître. J'ai du mal avec réglage de la barre de navigation élément actif lorsque l'utilisateur sélectionne. J'ai créé ma page maître par la suite ce tutoriel sur la façon d'utiliser Twitter Bootstrap avec ASP.NET.

Voici le code de ma page principale:

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

Ensuite, j'ai ajouté ce script pour la Tête afin de fixer problème avec le 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>

Cependant, rien n'a été changé. Lorsque j'ai sélectionné un élément dans la barre de navigation, la classe active n'a pas été ajoutée à la nouvelle élément sélectionné et je ne sais pas pourquoi. Pourriez-vous svp m'aider dans la résolution de ce problème.?

source d'informationauteur Android FanBoy

Utiliser ceci:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="/Default.aspx">Default</a></li>
                <li><a href="/Clients.aspx">Clients</a></li>
                <li><a href="/_display/">Display</a></li>
            </ul>
        </div>
    </div>
</div>

$(document).ready(function () {
        var url = window.location;
        $('.navbar .nav').find('.active').removeClass('active');
        $('.navbar .nav li a').each(function () {
            if (this.href == url) {
                $(this).parent().addClass('active');
            }
        }); 
    });

Exemple: http://jsfiddle.net/yUdZx/3/

Et, dans le "href" utilisation "de la Page.ResolveUrl"

<a href="<%= Page.ResolveUrl("~/Clients.aspx") %>">Clients</a>

C'est mieux...

Fait Reynaldo, est presque ça...
Au moins pour moi, cela fonctionne plutôt bien, sur activing l'option en cours et deactiving la précédente, basée sur son exemple.

$(document).ready(function() {
    var url = window.location;                
    $('ul.nav li a').each(function () {
         if (this.href == url) {
              $("ul.nav li").each(function () {
                   if ($(this).hasClass("active")) {
                        $(this).removeClass("active");
                   }
              });
              $(this).parent().addClass('active');
         }
    });
});

1

J'ai placé ce dans chacune de mes pages de contenu, la modification de l'id de la valeur liquidative du jour de chaque page (ce qui utilise des sélecteurs JQuery). Donc pour que cela fonctionne pour vous, vous aurez besoin de donner la liste de vos éléments d'un Id. Je n'ajouterai pas "active" de la classe à la page maître, parce que tout ce que nous devons faire est de mettre en évidence le plus approprié lorsque le chargement du contenu.
```
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("[id$=yourNavItemId]").addClass("active");
    });
</script>
```
Remarque: si vous utilisez ASP.NET les contrôles au lieu de la liste des éléments à l'intérieur de votre barre de navigation, ils pourraient recevoir le préfixe lors de l'exécution à l'origine de votre javascript de ne pas trouver l'Id que vous pensez que vous êtes la recherche pour.

code suivant fonctionne si j'ai des sous-pages:

 $(document).ready(function () {

        $('.navbar .nav').find('.active').removeClass('active');

        var url = window.location.toString();
        var u = url.substring(0, url.lastIndexOf("/")).toString();

        $('.navbar .nav li a').each(function () {

            var hr = this.href.substring(0, this.href.lastIndexOf('/')).toString();

            if ((u == hr) || (u.indexOf(hr) > -1))
            {
                $(this).parent().addClass('active');
                return false;
            }
        });
        //Deactivation to manually add items you have with href = "#" example:
        $('#liSalir').removeClass('active');
});

Si vous utilisez de navigation bar avec dropdown-menu ensuite, mettre ci-dessous le script à la fin de votre page principale(avant le corps de la balise de fermeture):

<script type="text/javascript">
$(document).ready(function () {
    var url = window.location;
    $('ul.nav li a').each(function () {
        if (this.href == url) {
            $("ul.nav li").each(function () {
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                }
            });
            $(this).parent().parent().parent().addClass('active');
        }
    });
});
</script>

Cela a fonctionné pour moi.

Je sais que ce post est vieux, mais l'utilisation

    $(document).ready(function () {

    var url = window.location;
    $('ul.nav li a').each(function () {
        if (this.href == url) {
            $("ul.nav li").each(function () {
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                }
            });
            $(this).parents().addClass('active');
        }

    });

});

Puisque vous souhaite également active de tous les parents.

var windowUrl = window.location.href.toLowerCase();
//var windowUrl = window.location.href.toLowerCase().split('.')[0];
setTimeout(function () {
    var windowUrl = window.location.href.toLowerCase();
    $('#nav li').removeClass('active');
    $('#nav li').each(function (index) {
        pageUrl = $(this).find('a').attr('href');
        if (windowUrl.indexOf(pageUrl) > -1) {
            $(this).addClass('active');
        }
    });
}, 10);

J'ai créé un exemple de ce qui remplir pleinement vos besoins vous avez besoin de modifier le code en fonction de votre besoin.
Utilisez cette jquery sur la page principale

 <script type="text/javascript">
        $(function () {
            $('[id*=submenu]').addClass('sub-menu open');
            $('[id*=Master_Pages]').attr("aria-expanded", true);

            $('.subMenus').click(function () {
                localStorage.setItem('lastTab', $(this).attr('id'));
            });
        });
        function pageLoad() {
            var isActiveLink = false;
            $.each($('.subMenus'), function () {
                if ($(this).attr('id') == localStorage.getItem('lastTab')) {
                    $(this).closest('li').addClass('active');
                    localStorage.removeItem('lastTab');
                    isActiveLink = true;
                }
                else {
                    $(this).closest('li').removeClass('active');
                }
            });
            if (!isActiveLink) {
                $('[id*=Master_Designation]').closest('li').addClass('active');
            }
        }
    </script>

Vous devez vous connecter pour publier un commentaire.