Comment changer dynamiquement la couleur de l'élément de menu sélectionné d'une page Web?
Je suis nouveau dans le développement de pages Web. Je cherche à créer des menus similaires à ceux de stackoverflow.com (comme Questions, Tags, Utilisateurs illustrés ci-dessus). Comment puis-je changer la couleur du menu sélectionné (par exemple, la couleur d'arrière-plan de la question passe à l'orange lorsque "cliqué")?
J'ai réussi à changer la couleur en survolant (en utilisant CSS) car c'était simple, mais j'ai du mal avec ça.
Puis-je obtenir cet effet de changer la couleur d'un élément cliqué en utilisant uniquement CSS?
Définissez les styles pour la classe active et survolez:
Vous devez alors activer la li, côté serveur. Ainsi, lorsque vous dessinez le menu, vous devez savoir quelle page est chargée et la définir sur:
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
Mais si vous modifiez le contenu sans recharger, vous ne pouvez pas modifier définir l'élément li actif sur le serveur, vous devez utiliser javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.menu{width: 300px; height: 25; font-size: 18px;}
.menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
.menu li:hover, .menu li.active {
background-color: #f90;
}
</style>
</head>
<body>
<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$(".menu li").click(make_button_active);
}
)
</script>
</body>
</html>
Il serait probablement plus facile de l'implémenter en utilisant JavaScript ... Voici un script JQuery à démo ... Comme les autres l'ont mentionné ... nous avons une classe nommée 'active' pour indiquer l'onglet actif - PAS la pseudo-classe ': actif.' Nous aurions pu tout aussi facilement le nommer ... sélectionné, actuel, etc., etc.
/* CSS */
#nav { width:480px;margin:1em auto;}
#nav ul {margin:1em auto; padding:0; font:1em "Arial Black",sans-serif; }
#nav ul li{display:inline;}
#nav ul li a{text-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;}
#nav ul li a:hover{background:#ff9900; color:#ffffff;}
#nav ul li a.active {background:#ff9900; color:#ffffff;}
/* JQuery Example */
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
/* HTML */
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>
Je suis en retard à cette question, mais c'est vraiment super facile. Vous définissez simplement plusieurs classes d'onglets dans votre fichier css, puis chargez l'onglet requis en tant que classe dans le fichier php lors de la création de la balise LI.
Voici un exemple de le faire entièrement sur le serveur:
CSS
html ul.tabs li.activeTab1, html ul.tabs li.activeTab1 a:hover, html ul.tabs li.activeTab1 a {
background: #0076B5;
color: white;
border-bottom: 1px solid #0076B5;
}
html ul.tabs li.activeTab2, html ul.tabs li.activeTab2 a:hover, html ul.tabs li.activeTab2 a {
background: #008C5D;
color: white;
border-bottom: 1px solid #008C5D;
}
PHP
<ul class="tabs">
<li <?php print 'class="activeTab1"' ?>>
<a href="<?php print 'Tab1.php';?>">Tab 1</a>
</li>
<li <?php print 'class="activeTab2"' ?>>
<a href="<?php print 'Tab2.php';?>">Tab 2</a>
</li>
</ul>
Il existe une solution CSS pure que j'utilise actuellement.
Ajoutez un ID de corps (ou une classe) identifiant vos pages et vos éléments de menu, puis utilisez quelque chose comme:
HTML:
<html>
<body id="body_questions">
<ul class="menu">
<li id="questions">Question</li>
<li id="tags">Tags</li>
<li id="users">Users</li>
</ul>
...
</body>
</html>
CSS:
.menu li:hover,
#body_questions #questions,
#body_tags #tags,
#body_users #users {
background-color: #f90;
}
Essaye ça. Il conserve la couleur jusqu'à ce qu'un autre élément soit cliqué.
<style type="text/css">
.activeElem{
background-color:lightblue
}
.desactiveElem{
background-color:none
}
}
</style>
<script type="text/javascript">
var activeElemId;
function activateItem(elemId) {
document.getElementById(elemId).className="activeElem";
if(null!=activeElemId) {
document.getElementById(activeElemId).className="desactiveElem";
}
activeElemId=elemId;
}
</script>
<li id="aaa"><a href="#" onclick="javascript:activateItem('aaa');">AAA</a>
<li id="bbb"><a href="#" onClick="javascript:activateItem('bbb');">BBB</a>
<li id="ccc"><a href="#" onClick="javascript:activateItem('ccc');">CCC</a>
J'utilise PHP pour trouver l'URL et faire correspondre le nom de la page (sans l'extension de .php, je peux également ajouter plusieurs pages qui ont toutes le même mot en commun comme contact, formulaire de contact, etc.) Tous auront cette classe ajoutée) et ajouter une classe avec PHP pour changer la couleur, etc. Pour cela, vous devrez enregistrer vos pages avec l'extension de fichier .php.
Voici une démo. Modifiez vos liens et pages au besoin. La classe CSS pour tous les liens est .tab et pour le lien actif, il existe également une autre classe de .currentpage (tout comme la fonction PHP), c'est donc là que vous écraserez vos règles CSS. Vous pouvez les nommer comme bon vous semble.
<?php # Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];?>
<div class="nav">
<div class="tab
<?php
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " currentpage";
?>"><a href="index.php">Home</a>
</div>
<div class="tab
<?php
if(preg_match("/services/i", $currentpage))
echo " currentpage";
?>"><a href="services.php">Services</a>
</div>
<div class="tab
<?php
if(preg_match("/about/i", $currentpage))
echo " currentpage";
?>"><a href="about.php">About</a>
</div>
<div class="tab
<?php
if(preg_match("/contact/i", $currentpage))
echo " currentpage";
?>"><a href="contact.php">Contact</a>
</div>
</div> <!--nav-->
En supposant que vous vouliez changer la couleur du lien/onglet actuellement sélectionné ... il vaut mieux appliquer une classe (disons active) au lien/onglet actuellement sélectionné puis styliser différemment.
Un exemple de style pourrait être:
li.active, a.active {
background-color: #f90;
}
Enfin, j'ai réussi à réaliser ce que je voulais avec toute votre aide et la publication Changer un style de lien en cliquant. Voici le code pour cela. J'ai utilisé JavaScript pour ce faire.
<html>
<head>
<style type="text/css">
.item {
width:900px;
padding:0;
margin:0;
list-style-type:none;
}
a {
display:block;
width:60;
line-height:25px; /*24px*/
border-bottom:1px none #808080;
font-family:'arial narrow',sans-serif;
color:#00F;
text-align:center;
text-decoration:none;
background:#CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:0em;
padding: 0px;
}
a.item {
float:left; /* For horizontal left to right display. */
width:145px; /* For maintaining equal */
margin-right: 5px; /* space between two boxes. */
}
a.selected{
background:orange;
color:white;
}
</style>
</head>
<body>
<a class="item" href="#" >item 1</a>
<a class="item" href="#" >item 2</a>
<a class="item" href="#" >item 3</a>
<a class="item" href="#" >item 4</a>
<a class="item" href="#" >item 5</a>
<a class="item" href="#" >item 6</a>
<script>
var anchorArr=document.getElementsByTagName("a");
var prevA="";
for(var i=0;i<anchorArr.length;i++)
{
anchorArr[i].onclick = function(){
if(prevA!="" && prevA!=this)
{
prevA.className="item";
}
this.className="item selected";
prevA=this;
}
}
</script>
</body>
</html>