Twitter Bootstrap ajoute une classe active à li
Utilisation de Twitter bootstrap, et je dois initier la classe active à la partie li de la navigation principale. Automagiquement ... Nous utilisons php pas Ruby.
Échantillon nav:
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/forums">Forums</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/faqs.php">FAQ's</a></li>
<li><a href="/item.php">Item</a></li>
<li><a href="/create.php">Create</a></li>
</ul>
Le code de démarrage est comme suit:
<li class="active"><a href="/">Home</a></li>
Il suffit donc de comprendre comment ajouter la classe active à la page en cours. J'ai examiné presque toutes les réponses sur Stack, sans grande joie.
J'avais joué avec ça:
/*menu handler*/
$(function(){
var url = window.location.pathname;
var activePage = url.substring(url.lastIndexOf('/')+1);
$('.nav li a').each(function(){
var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);
if (activePage == currentPage) {
$(this).parent().addClass('active');
}
});
})
Mais pas de joie.
Nous avons réussi à réparer à la fin:
/*menu handler*/
$(function(){
function stripTrailingSlash(str) {
if(str.substr(-1) == '/') {
return str.substr(0, str.length - 1);
}
return str;
}
var url = window.location.pathname;
var activePage = stripTrailingSlash(url);
$('.nav li a').each(function(){
var currentPage = stripTrailingSlash($(this).attr('href'));
if (activePage == currentPage) {
$(this).parent().addClass('active');
}
});
});
Pour Bootstrap 3:
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
Mettre à jour
Pour Bootstrap 4:
var url = window.location;
// Will only work if string in href matches with location
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
Vous n'avez pas vraiment besoin de JavaScript avec Bootstrap:
<ul class="nav">
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
</ul>
Pour effectuer plus de tâches après la sélection de l'élément de menu, vous avez besoin de JS, comme expliqué par d'autres messages ici.
J'espère que cela t'aides.
si vous mettez
data-toggle="pill"
dans la balise, cela devrait fonctionner automatiquement.
http://Twitter.github.com/bootstrap/javascript.html#tabs
lire sous balisage
Cela a fait le travail pour moi, y compris les menus déroulants principaux actifs et les enfants actifs (grâce à 422):
$(document).ready(function () {
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
Si vous utilisez un framework MVC avec des itinéraires et des actions:
$(document).ready(function () {
$('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
Comme illustré dans cette réponse de Christian Landgren: https://stackoverflow.com/a/13375529/101662
Essaye ça.
// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');
// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
Cela fonctionne bien pour moi. Il marque les éléments de navigation simples et les éléments de navigation déroulants comme étant actifs.
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
Passer this.location.pathname à $('ul.nav a[href="'...'"]') marque également des éléments de navigation simples. Passer url n'a pas fonctionné pour moi.
La solution est simple et ne nécessite ni serveur ni ajax, vous avez uniquement besoin de jQuery et Bootstrap. Sur chaque page, ajoutez id à la balise body. Utilisez cette id pour trouver une balise contenant le nom de la page (valeur d’une balise).
Exemple:
page1.html
<body id="page1">
<ul class="nav navbar-nav">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
</ul>
<script src="script.js"></script>
</body>
page2.html
<body id="page2">
<ul class="nav navbar-nav">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
</ul>
<script src="script.js"></script>
</body>
script.js
<script>
$(function () {
$("#page1 a:contains('Page1')").parent().addClass('active');
$("#page2 a:contains('Page2')").parent().addClass('active');
});
</script>
Un grand merci à Ben! Youtube
Voici l'exemple complet d'amorçage Twitter et la classe active appliquée en fonction de la chaîne de requête.
Quelques étapes à suivre pour obtenir la solution correcte:
1) Incluez les derniers fichiers javascript jquery.js et bootstrap.js.
2) Inclure le dernier fichier bootstrap.css
3) Incluez querystring-0.9.0.js pour obtenir la valeur de la variable de chaîne de requête en js.
4) HTML:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a href="#?page=0">
Home
</a>
</li>
<li>
<a href="#?page=1">
Forums
</a>
</li>
<li>
<a href="#?page=2">
Blog
</a>
</li>
<li>
<a href="#?page=3">
FAQ's
</a>
</li>
<li>
<a href="#?page=4">
Item
</a>
</li>
<li>
<a href="#?page=5">
Create
</a>
</li>
</ul>
</div>
</div>
</div>
JQuery in Script Tag:
$(function() {
$(".nav li").click(function() {
$(".nav li").removeClass('active');
setTimeout(function() {
var page = $.QueryString("page");
$(".nav li:eq(" + page + ")").addClass("active");
}, 300);
});
});
J'ai terminé bin, alors s'il vous plaît cliquez ici http://codebins.com/bin/4ldqpaf
J'ai eu le même problème, et c'est ce que j'ai ajouté dans mon script de lancement d'application, et cela a bien fonctionné. Voici le javascript
$(document).ready(function($){
var navs = $('nav > ul.nav');
// Add class .active to current link
navs.find('a').each(function(){
var cUrl = String(window.location).split('?')[0];
if (cUrl.substr(cUrl.length - 1) === '#') {
cUrl = cUrl.slice(0,-1);
}
if ($($(this))[0].href===cUrl) {
$(this).addClass('active');
$(this).parents('ul').add(this).each(function(){
$(this).parent().addClass('open');
});
}
});
});
Et le code HTML correspondant est présenté ci-dessous. J'utilise CoreUI , un modèle d'administration open source phénoménal et prend en charge de nombreux frameworks frontaux comme Angular, Plain Bootstrap, Angular 4 etc.
<div class="sidebar">
<nav class="sidebar-nav open" >
<ul class="nav" id="navTab" role="tablist">
<li class="nav-item">
<a class="nav-link" href="/summary"><i class="icon-speedometer"></i> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/balanceSheet"><i class="icon-chart"></i> Balance Sheet </a>
</li>
<li class="divider"></li>
<li class="nav-title border-bottom">
<p class="h5 mb-0">
<i class="icon-graph"></i> Assets
</p>
</li>
</ul>
</nav>
</div>
Pour activer les menus et sous-menus, même avec les paramètres dans l'URL, utilisez le code ci-dessous:
// Highlight the active menu
$(document).ready(function () {
var action = window.location.pathname.split('/')[1];
// If there's no action, highlight the first menu item
if (action == "") {
$('ul.nav li:first').addClass('active');
} else {
// Highlight current menu
$('ul.nav a[href="/' + action + '"]').parent().addClass('active');
// Highlight parent menu item
$('ul.nav a[href="/' + action + '"]').parents('li').addClass('active');
}
});
Ceci accepte les URL comme:
/des postes
/posts/1
/posts/1/modifier
$(function() {
// Highlight the active nav link.
var url = window.location.pathname;
var filename = url.substr(url.lastIndexOf('/') + 1);
$('.navbar a[href$="' + filename + '"]').parent().addClass("active");
});
Pour plus de détails Cliquez ici!
Aucun de ceux-ci n'a fonctionné pour moi. Ma configuration Bootstrap navigue vers des pages séparées (je ne peux donc pas le faire avec une action de clic, mais la classe active est supprimée lors de la navigation vers une nouvelle page) et mes URL ne correspondent pas exactement. Alors voici ce que j'ai fait, en fonction de ma situation d'exception. J'espère que ça aide les autres:
//Adding the active class to Twitter bootstrap navs, with a few alternate approaches
$(document).ready(function() {
var rawhref = window.location.href; //raw current url
var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly.
if (newpage == 'someNonMatchingURL') { //deal with an exception literally
newpage = 'matchingNavbarText'
}
if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc.
newpage = "moreMatchingNavbarText"
}
$(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable.
});