Pourquoi mon nav ul li:actif couleur d'arrière-plan ne fonctionne pas?

Dans ma navigation, je veux être capable de cliquer sur un lien de navigation et d'avoir la batterie au lithium d'élément de changer de couleur quand vous allez à la page. Par exemple. Je clique sur le a propos de nous dans l'onglet de navigation, il va à la page a propos de nous et à propos de nous page de l'onglet dans la barre de navigation a changé de couleur. J'ai essayé de nav ul li:actif, mais il ne fonctionne pas.

Voici le css:

#nav {
display: block;
position:relative;
border: 1px solid #002799;
background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
padding: 0px 0px 0px 0px;
border-radius: 15px;
height: 40px;
width: 470px;
margin: 0px auto;
font: Bold 16px Verdana;
}
#nav ul {
margin: 0px;
padding: 0px;
min-width:250%;
}
#nav li {
list-style: none;
float: left;
position: relative;
display:inline;
width:auto;
}
#nav ul li {
list-style: none;
float: left;
position: relative;
}
#nav ul li:last-child a {
border:none;
}
#nav ul li:hover {
background: #060652;
}
#nav ul li:active {
background: #060652;
}
#nav ul li:hover ul {
display:block;
width:100%;
}
#nav ul ul {
display: none;
position:absolute;
left:0px;
min-width:250%;
z-index: 999;
background-color: #4970E3;
}
#nav ul ul li {
border: 1px solid #FFFFFF;
display:block;
float: none;
z-index: 999;
width: auto;
}
#nav ul ul li a {
border-right: none;
font: Bold 16px Verdana;
width: auto;
}
#nav ul li a {
text-decoration: none;
display: block;
border-right: 1px solid #121B3E;
padding: 10px 15px;
color: #fbfbfb !important; 
}

Voici le code html:

<div id="nav">
<ul>
<li><a href="http://osweb01.ostech.com.au/">Home</a>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=12">About Us</a>
<ul>
<li><a href="http://osweb01.ostech.com.au/?page_id=19">Why OSTech</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=21">Testimonials</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=23 ">Case Study 1</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=25">Case Study 2</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=27">Green IT</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=29">OSdesk Intel vPro</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=31">Workstation Innovation</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=33">Consolidation and Centralisation</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=35">The Green Grid</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=37">Clean Technologies</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=39">OSdesk Remote Management</a></li>
</ul>
</li>
<li><a>What We Do</a>
<ul>
<li><a href="http://osweb01.ostech.com.au/?page_id=41">OSdesk</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=43">OSguard</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=45">OSmon</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=47">OSvault & OSclass</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=49">OSmail & OShost & OSshare</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=52">OStrack & OSdms</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=54">OSarchive & OSgroup</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=62">OSfaq & OShelp</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
</ul>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a><ul>
</li>
</ul>
</div>
Voir aussi: Confondu par CSS pseudo-classe :active

OriginalL'auteur user3381910 | 2014-03-19

  1. 7

    Vous avez mal compris ce que :active moyens.

    Votre navigateur web n'a pas de concept qui li sur la page représentent les actuel page, sauf si vous lui dites en quelque sorte.

    Active sélecteur sélectionne le lien actif. C'est un lien que vous avez sélectionné à l'aide de la navigation au clavier (mais je n'ai pas suivi encore) ou un lien que vous avez juste a cliqué sur (avant le nouveau chargement de la page). Une fois la nouvelle page se charge, aucun des liens sont de nouveau actifs.

    Donc, vous ne pouvez utiliser :active sur a éléments, et pas pour ce que vous essayez de faire ici.

    Au lieu de cela, vous voulez ajouter une classe à l' li pour n'importe quel onglet, représentent actuellement la page, et utiliser les CSS pour le style que li de façon appropriée:

    <li><a href="...">Why OSTech</a></li>
<li class="current"><a href="...">Testimonials</a></li>
<li><a href="...">Case Study 1</a></li>

    avec:

    li.current {
background: #060652;
}
    Le problème avec la méthode ci-dessus est que j'ai deux fichiers de modèle. Un pour et un indice pour toutes les autres pages. J'utilise wordpress pour créer le site et je suis ajoutant le contenu par le biais de son éditeur de page.
    Je ne sais rien à propos de wordpress, mais je suppose que vous pouvez définir une variable à la page en cours, puis conditionnellement ajouter la classe à l'html basé sur cette variable.
    Ok je vais essayer à l'aide d'une variable via php.

    OriginalL'auteur SpoonMeiser

  2. 2

    :active est seulement l'action lorsque le lien est activement appuyé, de sorte que vous pouvez voir clairement si vous cliquez sur le lien et maintenez sur elle, au lieu de se laisser aller.

    Pour ce faire, vous devez affecter une classe à l' a de la page qui est ouverte. Il y a des façons de le faire avec un langage côté serveur afin de ne pas avoir à le faire manuellement, mais si vous faites une statique .html page, vous devrez ajouter manuellement une classe (comme class="active") à la a pour chaque page qui est "actif".

    Ainsi, par exemple:

    menu.html aura <a href="menu.html" class="active">Menu</a> et <a href="about.html">About</a>

    Alors que about.html aura <a href="menu.html">Menu</a> et <a href="about.html" class="active">About</a>

    Pouvez-vous faire cela pour les fichiers de templates? Parce que je suis en train de faire un site web avec wordpress et le menu de navigation est en deux fichiers de modèle index.php et page.php(modèle pour chaque page, à l'exception de l'indice). Je n'ai pas de créer une page html pour chaque page du site. Il travaillera si j'ajoute de la classe à tous les liens dans un fichier de modèle?
    non, il ne sera pas. Dans la note WP il y a déjà une classe d'être ajoutée à la mère li de la a si vous utilisez le menu de la structure (et de ne pas coder en dur de votre propre dans le .php fichier. Si vous êtes de codage en dur votre propre menu en header.php de WP, ne le font pas.) De ce fait, vous pouvez simplement cibler li.current-menu-item a à faire le style dont vous avez besoin pour la page que vous êtes actuellement sur.
    Putain! Je n'ai coder en dur dans mon menu header.php et je n'ai pas vraiment envie de le supprimer et de refaire le menu grâce à wordpress de nouveau. Est-il une autre façon d'obtenir ce que je veux si mon menu est codé en dur? Je vais essayer de faire ce que SpoonMeiser a proposé tout d'abord avec des variables.
    Je pense que ce Aister a écrit à propos de $_GET pour l'ID de la page est la solution pour vous 🙂

    OriginalL'auteur Ming

  3. 1

    Juste comme tout le monde le dit, vous aurez besoin d'utiliser une catégorie distincte pour l'un, :active ne fonctionne pas comme ce que vous voulez.

    Toutefois, si vous utilisez le $_GET['page_id'] valeur, vous pouvez définir automatiquement la classe. Comme ceci:

    <li><a <?php if ($_GET['page_id'] == 56) { echo 'class="active" '; } ?>href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>

    Vous pouvez même aller un mile supplémentaire, et ont le page_id stockées dans un tableau en haut du fichier php. Et faire une boucle foreach et de l'écho sur les liens ainsi que de la classe.

    <li><a>What We Do</a>
<ul><?php
$menu1 = array ( 41,43,45,47,49,52,54,62,56 );
foreach ($menu1 as $menu_item) {
echo "<li><a ";
if ($_GET['page_id'] == $menu_item) { echo 'class="active" '; }
echo 'href="http://osweb01.ostech.com.au/?page_id='.$menu_item.'">OSbill & OScal</a></li>';
} ?>
</ul>
</li>

    OriginalL'auteur Aister

  4. 0

    Si le ci-dessus ne fonctionne pas (ce qui n'était pas pour moi) il suffit d'appliquer une couleur différente à votre barre de navigation en fonction de la page que vous êtes sur.

    ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li b {
background-color: green;
}
li a:hover {
background-color: red;
color: white;
}

    Utiliser le code comme ci-dessus? Barre de navigation Simple avec "active" trompé. 

    <ul>
<li><b href = "homepage.html">Homepage</a></li>
</ul>

    OriginalL'auteur htmlfool

  5. 0

    Étendre sur ce @Aister posté je ne voudrais pas utiliser echo sur le html mais

    <li>
<a>What We Do</a>
<ul>
<?php
$menu1 = array ( 41,43,45,47,49,52,54,62,56 );
foreach ($menu1 as $menu_item) {
?>
<li>
<a <?= ($_GET['page_id'] == $menu_item)? 'class="active" ' : '';?> href="http://osweb01.ostech.com.au/?page_id=<?=$menu_item?>">OSbill & OScal</a>
</li>
<?php
} 
?>
</ul>
</li>

    Le principal avantage de cette approche est que vos modèles seront beaucoup plus facile à lire dans votre éditeur, parce que la syntaxe html soulignant reconnaîtra le HTML et pas seulement une chaîne de caractères.

    Seul inconvénient à mon approche, c'est que vous avez besoin d'avoir le php ini configuré pour autoriser les balises courtes ou ça va casser. Si cela ne fonctionne pas et vous ne pouvez pas changer de remplacer 

    <?=

    avec 

    <?php echo

    OriginalL'auteur Corey Young