Comment avoir la classe=“choisis” en fonction de ce que la page en cours/url

Ceci est mon premier post donc pardonner comme je suis tout nouveau dans le monde du développement web.

Normalement, lorsque je tente de faire un site, j'ai créer un fichier appelé header.html et footer.html de sorte que je ne changer les données une seule fois dans toutes les pages plutôt que d'avoir plusieurs même les en-têtes sur beaucoup de fichiers html. Et tous les inclure dans un fichier php avec le contenu et le code php qui vient par page.

Maintenant mon problème est que je n'ai que 1 en-tête, le css est conçu de façon à ce que le menu/onglet est, il sera marqué comme "choisi" de sorte que son évidente pour l'utilisateur quelle page qu'ils sont actuellement.

Ma question est comment puis-je résoudre ce problème:

1.) Pour avoir la class="selected" en fonction de ce que la page en cours/url.

<!--Menu Starts-->
        <div class="menu">
            <div id="smoothmenu" class="ddsmoothmenu">
                <ul>
                    <li><a href="index.php" class="selected">Home</a></li>
                    <li><a href="about.php">About</a> </li>
                    <li><a href="services.php">Services</a> </li>
                    <li><a href="features.php">Features</a></li>
                    <li><a href="#">Support</a>
                        <ul>
                            <li><a href="support1.php">Support 1</a></li>
                            <li><a href="support2.php">Support 2</a></li>
                         </ul>
                    </li>
                </ul>
             </div>
        </div>
<!-- Menu Ends--!>

Merci 🙂

OriginalL'auteur GitKidd | 2013-04-02

  1. 13

    Si vous êtes à la recherche pour un non-javascript /php approche...

    Vous devez d'abord déterminer qui nav-lien doit être définie comme active, puis ajouter le sélectionné classe. Le code devrait ressembler à quelque chose comme ceci

    HTML dans les fichiers php

    Appeler une fonction php inline dans le lien hypertexte <a> balisage de passage dans les liens de destination uri de la demande

    <ul>
    <li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
    <li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
    <li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
    <li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
    <li><a href="#">Support</a>
        <ul>
            <li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
            <li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
         </ul>
    </li>
</ul>

    Fonction PHP

    La fonction php suffit de comparer le passé dans l'uri de la demande et si elle correspond à la page en cours en cours de rendu de sortie de la sélectionné classe

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

    if ($current_file_name == $requestUri)
        echo 'class="selected"';
}
?>
    +1 pour l'encapsulation de tout le code dans l'en-tête et la fourniture d'une non-javascript approche.
    Moutray Omg! merci pour ça 🙂 , vraiment aidé! J'ai fait une nouvelle inclure le fichier appelé config.php et compris le présent code. Il a résolu mon problème. J'ai Toujours trouvé stackoverflow que vraiment une aide de la communauté pour aller 🙂 Merci encore à tous.
    content que ça a aidé...
    Génial, mec. Merci.

    OriginalL'auteur Chris Moutray

  2. 1

    Vous pourriez ID de chaque lien et de l'utilisation de JavaScript/Jquery pour ajouter le selected classe pour le lien approprié.

    <!--Menu Starts-->
        <div class="menu">
            <div id="smoothmenu" class="ddsmoothmenu">
                <ul>
                    <li id="home-page"><a href="index.php" class="selected">Home</a></li>
                    <li id="about-page"><a href="about.php">About</a> </li>
                    <li id="services-page"><a href="services.php">Services</a> </li>
                    <li id="features-page"><a href="features.php">Features</a></li>
                    <li id="support-page"><a href="#">Support</a>
                        <ul>
                            <li id="support1-page"><a href="support1.php">Support 1</a></li>
                            <li id="support2-page"><a href="support2.php">Support 2</a></li>
                         </ul>
                    </li>
                </ul>
             </div>
        </div>
<!-- Menu Ends--!>

    Sur votre page de contenu utiliser jQuery pour faire quelque chose comme:

    $(document).ready(function(){
    $("#features-page").addClass("selected");
});

    Une autre méthode que vous pouvez utiliser est:

    Ajouter une classe de l'élément basé sur le nom de la page

    OriginalL'auteur ajtrichards

  3. 1

    Donner à chaque lien un id séparé puis utiliser jQuery sur les pages individuelles.

     <li><a href="index.php" id="home">Home</a></li>
 <li><a href="about.php" id="about">About</a> </li>
 <li><a href="services.php" id="services">Services</a> </li>
 <li><a href="features.php" id="features">Features</a></li>
 <li><a href="#" id="support">Support</a>
     <ul>
         <li><a href="support1.php">Support 1</a></li>
         <li><a href="support2.php">Support 2</a></li>
     </ul>
 </li>

    Sur la page services:

    $(document).ready(function(){
    $("#services").addClass("selected");
});

    Ou même mieux comme robertc souligné dans les commentaires, il n'y a même pas besoin de s'embêter avec les id il suffit de faire le jquery ceci:

    $(document).ready(function(){
    $("[href='services.php']").addClass("selected");
});
    Merci @Rick 🙂
    Pas besoin d'encombrer avec des Id: $("[href='services.php']").addClass("selected");
    Bon point, n'a jamais vraiment pensé à ça, encore un peu nouveau pour jQuery moi-même. Je vais l'ajouter comme une option, merci.

    OriginalL'auteur Rick Calder

  4. 1

    Une variante de Chris approche est à la sortie d'une classe particulière d'identifier la page, par exemple sur la body élément, puis utiliser des classes sur les éléments de menu, et une règle CSS que les objectifs de leur correspondance. Par exemple, cette page:

    <DOCTYPE HTML>
<head>
  <title>I'm the about page</title>
  <style type="text/css">
         .about .about,
         .index .index,
         .services .services,
         .features .features {
           font-weight: bold;
         }
  </style>
</head>
<body class="<?php echo basename(__FILE__, ".php"); ?>">
  This is a menu:
  <ul>
    <li><a href="index.php" class="index">Home</a></li>
    <li><a href="about.php" class="about">About</a> </li>
    <li><a href="services.php" class="services">Services</a> </li>
    <li><a href="features.php" class="features">Features</a></li>
  </ul>
</body>

    ...est jolie lumière sur la dynamique de code, mais devrait atteindre l'objectif; si vous l'enregistrez en tant que "about.php" puis le lien apparaîtra en gras, mais si vous l'enregistrez en tant que "services.php" puis le lien des Services sera gras, etc.

    Si votre structure de code approprié, vous pourriez être en mesure de simplement coder en dur la page body classe dans le fichier de modèle, plutôt que d'utiliser toute dynamique de code. Cette approche de manière efficace vous donne un moyen de se déplacer, la "logique" pour le menu système le menu code, qui sera toujours le même pour chaque page, et à un niveau plus élevé.

    Comme un bonus supplémentaire, vous pouvez maintenant utiliser pur CSS pour cibler d'autres choses, fondé sur la page que vous êtes sur. Par exemple, vous pouvez tourner à tous les h1 éléments sur la index.php page rouge juste en utilisant plus de CSS:

     .index h1 { color: red; }
    merci pour le suivi de l'info 🙂 , vraiment aidé comme je n'ai jamais connu cela avant. Je vais essayer cela avec mon projet en cours. 🙂

    OriginalL'auteur Matt Gibson

  5. 1

    Vous pouvez le faire à partir de simples si et page PHP /basename() la fonction..

    <!--Menu Starts-->
    <div class="menu">
        <div id="smoothmenu" class="ddsmoothmenu">
            <ul>
                <li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="selected" <?php } ?>>Home</a></li>
                <li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="selected" <?php } ?>>About</a> </li>
                <li><a href="services.php" <?php if (basename($_SERVER['PHP_SELF']) == "services.php") { ?> class="selected" <?php } ?>>Services</a> </li>
                <li><a href="features.php" <?php if (basename($_SERVER['PHP_SELF']) == "features.php") { ?> class="selected" <?php } ?>>Features</a></li>
            </ul>
         </div>
    </div>

    OriginalL'auteur adnanmn

  6. 0

    Désolé pour mon mauvais anglais, mais peut-être qu'il pourrait les aider. Vous pouvez utiliser jQuery pour cette tâche. Pour cela, vous devez faire correspondre l'url de la page à l'ancre de menu, puis ajouter la classe sélectionnée. par exemple, le code jQuery serait

        jQuery('[href='+currentURL+']').addClass('selected');

    OriginalL'auteur Umair Hamid