mettre en surbrillance onglet sélectionné

Question

J'ai cherché mais je n'ai pas trouvé de réponse à ma satisfaction alors J'ai un fichier d'en-tête, qui est inclus en haut de chaque page et une partie de l'en-tête est un menu avec 3 onglets, lorsque l'utilisateur clique sur onglet navigateur les amener à cette page (fonctionne très bien), ce que je veux, c'est que n'importe quel utilisateur clique sur l'onglet pour être mis en évidence (couleur de retour diff) lorsque cette page est chargée.

Voici html:

<div id="top-choicebar"> 
     <ul id="topmenu"> 
      <li><a href="daily.php" class="ww" >Daily</a></li> 
      <li>< href="weekly.php" class="ww">Weekly</a></li> 
      <li>< href="monthly.php" class="ww">Monthly</a></li> 
     </ul> 

<div id="event-menu"> 

Nouveau php et jquery ... toute aide sera grandement appriciated

Answer 1

Vous pouvez le faire par des CSS et des classes conditionnelles.

<a href="weekly.php" class="<?= stripos($_SERVER['PHP_SELF'], 'weekly.php') ? 'selected' : ''?>">Weekly</a> 
<a href="monthly.php" class="<?= stripos($_SERVER['PHP_SELF'], 'monthly.php') ? 'selected' : ''?>">Monthly</a> 

Answer 2

vous pouvez essayer d'utiliser quelque chose comme ça, mais il est très rudimentaire:

<?php if (preg_match("/weekly.php/i", $_SERVER["SCRIPT_NAME"])) { 
    // Tab should be highlighted 
    < href="weekly.php" class="ww active">Weekly</a> 
} else { 
    < href="weekly.php" class="ww">Weekly</a> 
} 
?> 

cela ajoutera une classe « active » du lien, que vous pouvez alors le style avec CSS pour changer l'arrière-plan couleur ...

Answer 3

Ce que j'ai toujours fait dans le passé est de passer un paramètre à la classe qui construit le menu en fonction de la page que je charge.

Alors daily.php charges jusqu'à Header.php et il passe comme une variable new Header(0) lorsque tête construit le html, il boucle à travers les liens pour les imprimer, et le nombre qui a été adopté, il ajoute une classe comme current.

Donc, si:

== Daily 0
de == 1 semaine
de == Mensuel 2

L'en-tête choisissait le bon d'appliquer la classe en fonction de la page qu'elle appelle . Bien sûr, cela ne fonctionnerait que si vos liens de menu sont stockés quelque part en dehors du HTML brut, comme dans une base de données ou même simplement un tableau.

Answer 4

Avoir une configuration de classe comme .selected{background-color:red} qui définit la couleur de fond différente que vous souhaitez afficher. Ensuite, lorsque vous rendez la page, puisque vous savez déjà de quel onglet il s'agit, vous ne faites que rendre l'onglet sélectionné avec cette classe attachée. Si vous affichez le contenu de l'onglet par ajax, vous pouvez simplement trouver tous les onglets avec la classe "selected" puis ajouter la classe à l'onglet sélectionné $ ("# topmenu li"). Live ("click", function() { $ ("# topmenu"). Find (". Selected"). RemoveClass ("selected"); $ (this) .addClass ("selected"); });