J'utilise asp.net 4.0 avec bootstrap3. J'ai utilisé la barre de navigation dans ma page maître et j'ai essayé ce code jquery pour activer le menu actuel. Ci-dessous le code

$('.nav li a').click(function (e) {
          
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
          
        });

Cela fonctionne bien mais lorsque la page de menu actuelle se charge, elle devient inactive. Comment définir actif pour le menu actuel?

1
Vikash 27 déc. 2015 à 16:01

2 réponses

Meilleure réponse

Une autre façon (plus complexe) est:

Tout d'abord, la conception de votre page maître (barre de navigation):

<li id="liContacts" runat="server">
    <a href="Contact.aspx">Contacts</a>
</li>

Code de page maître derrière:

public String linkContacts
{
    get 
    {
        return "not_active";
    }
    set
    {
        liContacts.Attributes.Add("class", "" + value + "");
    }
}

Ajoutez le code suivant à l'en-tête de votre page de contenu:

<%@ MasterType VirtualPath="~/MasterPage.master" %> <!-- change path to your master page //-->

Code de la page de contenu derrière:

this.Master.linkContacts = "active";
1
Khazratbek 27 déc. 2015 à 17:21

Vous définissez la classe css sur un élément, puis rechargez la page, donc les modifications y sont perdues. L'une des façons d'accomplir ce que vous essayez de faire est d'ajouter ce code js à votre page maître (personnaliser le sélecteur pour votre cas):

$(document).ready(function() {
    $('#main-navbar .nav a[href="' + this.location.pathname + '"]').parent().addClass('active');
});  
0
Orif Khodjaev 27 déc. 2015 à 14:03