Comment définir un élément de la barre de navigation comme actif lorsque l'utilisateur le sélectionne?
Je suis un nouveau développeur ASP.NET Web Forms et j'essaie d'utiliser Twitter Bootstrap avec la page maître. Je ne parviens pas à définir un élément de la barre de navigation comme actif lorsque l'utilisateur le sélectionne. J'ai créé ma page maître simple en suivant ce tutoriel sur l'utilisation de Twitter Bootstrap avec ASP.NET.
Voici le code de ma page maître:
<%@ 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 à the Head afin de résoudre le 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 de la barre de navigation, la classe active n'a pas été ajoutée au nouvel élément sélectionné et je ne sais pas pourquoi. Pourriez-vous s'il vous plaît m'aider à résoudre ce problème?
Utilisez 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 "href", utilisez "Page.ResolveUrl"
<a href="<%= Page.ResolveUrl("~/Clients.aspx") %>">Clients</a>
C'est mieux...
En fait, Reynaldo l’avait presque ... Au moins pour moi, cela fonctionne plutôt bien, pour activer l’option en cours et désactiver l’option précédente, sur la base de 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');
}
});
});
le 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');
});
Je l'ai placé dans chacune de mes pages de contenu, en modifiant l'identifiant de l'élément de navigation pour chaque page (cela utilise les sélecteurs JQuery). Donc, pour que cela fonctionne pour vous, vous devez donner un identifiant à vos éléments de liste. Je n'ajoute pas la classe "active" à la page principale, car il suffit de mettre en surbrillance la classe appropriée lors du chargement du contenu.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("[id$=yourNavItemId]").addClass("active");
});
</script>
Remarque: si vous utilisez des contrôles ASP.NET au lieu d'éléments de liste dans votre barre de navigation, leur préfixe au moment de l'exécution empêche votre javascript de trouver l'ID que vous pensez rechercher.
Si vous utilisez navigation bar avec menu déroulant , mettez le script ci-dessous à la fin de votre page maître ( avant la balise de fermeture du corps ):
<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 complètement fonctionné pour moi.
J'ai créé un exemple qui remplit pleinement votre demande et dont vous avez besoin pour modifier le code en fonction de vos besoins. Utilisez cette requête sur la page maître.
<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>
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);
Je sais que ce post est vieux mais utilise
$(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 tu veux aussi activer tous les parents.
Pour ceux qui, comme moi, préfèrent les implémentations côté serveur, transformez vos balises li présentant un intérêt en runat = "serveur" dans le fichier Master.Page. Le code en question ressemblera à ceci:
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" runat="server" id="tabHome" >
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" runat="server" id="tabContact">
<a class="nav-link" href="/Contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" runat="server">Hello, <asp:LoginName runat="server" />
</a>
</li>
</ul>
</div>
Ensuite, dans le code situé derrière la page maître - Site.Master.vb ou Site.Master.cs, en fonction de la langue utilisée - ajoutez ce qui suit dans l'événement Chargement de page:
Implémentation VB.Net:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)
Select Case thisURL
Case "Default", "default.aspx"
tabContact.Attributes.Remove("active")
tabHome.Attributes.Add("class", "active")
Case "Contact"
tabHome.Attributes.Remove("active")
tabContact.Attributes.Add("class", "active")
End Select
End Sub
C # implémentation:
Protected void Page_Load(Object sender, EventArgs e)
{
String thisURL =
Request.Url.Segments(Request.Url.Segments.Count - 1);
switch (thisURL)
{
Case "Default":
Case "default.aspx":
{
tabContact.Attributes.Remove("active");
tabHome.Attributes.Add("class", "active");
break;
}
Case "Contact" :
{
tabHome.Attributes.Remove("active");
tabContact.Attributes.Add("class", "active");
break;
}
}
}
Etant donné que "Default.aspx" est la page qui est censée être ouverte initialement, l'élément de menu "Accueil" est mis en surbrillance dès que l'utilisateur entre sur le site Web. Un exemple est affiché ci-dessous:
Par souci de simplicité, seuls deux éléments de barre de navigation ont été utilisés dans l'exemple, mais la même logique pourrait être implémentée si davantage sont nécessaires.
J'espère peut être utile.