web-dev-qa-db-fra.com

Rendre le lien de la barre de navigation Twitter Bootstrap actif

Quelle est la méthode standard pour rendre le lien actif dans une barre de navigation Twitter Bootstrap en gras? Il est clair qu'un lien gagne l'apparence active en gagnant la classe "active". Par exemple, le lien Home ci-dessous est actif. Lorsque je clique sur un lien de la barre de navigation, jQuery doit-il supprimer toutes les classes des éléments li, puis ajouter la classe active au lien que j'ai identifié? 

<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

EDIT: j'ai inclus

<script type="text/javascript">
$('.nav li a').on('click', function() {
    alert('clicked');
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});
</script>

après les liens. L'alerte apparaît lorsque je clique sur un lien, mais la classe "active" n'est pas ajoutée au lien.

Voici tout mon HTML de barre de navigation:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">AuctionBase</a>
            <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="home.php">Search</a></li>
                        <li><a href="about.php">About</a></li>
                    </ul>
            </div>
        </div>
    </div>
</div>
phpjquerytwitter-bootstrap
38
Rose Perrone

Vous devez vous assurer de définir la classe active dans le cadre de la réponse à la demande (lors du chargement de la page) et non avant, par exemple lorsque l'utilisateur clique sur un lien pour demander une page différente.

Vous devez d’abord déterminer quelle navlink doit être définie comme active, puis ajouter la classe active au <li>. Le code ressemblerait à quelque chose comme ça

Testé par le demandeur :

HTML dans un fichier php

Appeler une fonction php en ligne dans le balisage <li> en transmettant la requête de destination des liens uri

<ul class="nav">
    <li <?=echoActiveClassIfRequestMatches("home")?>>
        <a href="home.php">Search</a></li>
    <li <?=echoActiveClassIfRequestMatches("about")?>>
        <a href="about.php">About</a></li>
</ul>

PHP fonction

La fonction php simple a besoin de comparer la requête passée en URI et si elle correspond à la page en cours de rendu, sortie active class

<?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>
40
Chris Moutray

http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

Ce tutoriel a une excellente solution pour ce "problème". Je m'occupais de cela il y a un moment et je travaillais très bien pour moi, personnalisable aussi.

$(document).ready(function() {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
29
Tamás Matyó

Si vous ne voulez pas traiter avec le côté serveur et dans le cas où tous les hrefs sont simples, comme '/page.php', vous pouvez appeler 

$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');

après le chargement de la page.

10
vtk13

Tu peux essayer:

$('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

Toutefois, il serait préférable d'attribuer à votre nav un attribut id, car vous pouvez avoir plus d'un navigateur sur une page avec la classe nav.

$('#main-nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

Alternativement, au lieu d'utiliser .css('font-weight', 'bold'), vous pouvez simplement mettre ceci dans la feuille de style:

.active {
    font-weight: bold;
}
9
Chris Clower

Ajoutez le script suivant au bas de la page:

<script>
    $(document).ready(function() {
        var url = this.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        $('a[href="' + filename + '"]').parent().addClass('active');
    });
</script>
3
meda

Chris Moutray votre réponse m'a beaucoup aidé dans le développement de mon logiciel (j'utilise ZendFramework). J'ai écrit cette vue assistant:

<?php

class Zend_View_Helper_ActiveOrNot {

    function activeOrNot ( $requestUri ) { 

        $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

        if ($current_file_name == $requestUri)

            echo 'class="active"';

    }   

}

Dans ce cas, j'appelle cette aide dans la vue ainsi:

<?php $this -> activeOrNot ( "public" );

Merci!!

2
delor34n

Vous pouvez le résoudre avec CSS.

Ajoutez une classe au corps de chaque page:

<body class="home">

Ou si vous êtes sur la page de contact:

<body class="contact">

Ensuite, prenez ceci en considération lorsque vous créez vos styles:

ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } 
ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; }

Enfin, appliquez les noms de classe à vos éléments de liste:

<ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

Ce point, chaque fois que vous êtes sur la page body.home, votre lien.home un lien aura un style par défaut indiquant qu'il s'agit de la page en cours.

1
Luca Mori Polpettini

Si vous assignez le nom de la page à $ pageTitle, vous pouvez le faire sans JavaScript.

<ul class="nav navbar-nav">

      <li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>>
      <a href="website-development.php">
       Web Development
      </a>
      </li>...</ul>
0
GoodViber

Il suffit de mettre le code ci-dessous dans la section "head".

<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
});
</script>

Évidemment, n'oubliez pas votre appel à jquery.js avant.

Et ton:

<style>
.active{something...}
</style>
0
JBarros