html - menus - ¿Cómo cambiar dinámicamente el color del elemento de menú seleccionado de una página web?
galeria de imagenes html codigo (8)
Soy nuevo en el desarrollo de páginas web. Estoy buscando crear menús similares a los de stackoverflow.com (como Preguntas, Etiquetas, Usuarios que se muestran arriba). ¿Cómo cambio el color del menú seleccionado (por ejemplo, el color de fondo de la Pregunta cambia a naranja cuando se hace clic)?
Me las arreglé para cambiar el color al moverme (usando CSS) ya que era simple, pero estoy teniendo problemas con esto.
¿Puedo lograr este efecto de cambiar el color de un elemento en el que se hace clic solo con CSS?
Al fin logré lo que pretendía con toda su ayuda y la publicación Cambiar un estilo de enlace en un clic . Aquí está el código para eso. Usé JavaScript para hacer esto.
<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>
Establecer los estilos para la clase activa y flotar:
De lo que necesita para activar el li, en el lado del servidor. Entonces, cuando esté dibujando el menú, debe saber qué página está cargada y establecerla en:
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
Pero si está cambiando el contenido sin volver a cargar, no puede cambiar el elemento li activo en el servidor, necesita usar 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>
Hay una solución CSS pura que estoy usando actualmente.
Agregue un ID de cuerpo (o clase) que identifique sus páginas y sus elementos de menú, luego use algo como:
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;
}
Llego tarde a esta pregunta, pero es realmente muy fácil. Simplemente defina múltiples clases de pestañas en su archivo css y luego cargue la pestaña requerida como su clase en el archivo php mientras crea la etiqueta LI.
Aquí hay un ejemplo de hacerlo completamente en el servidor:
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>
Probablemente sería más fácil implementar esto usando JavaScript ... Aquí hay una secuencia de comandos de JQuery para demostrar ... Como mencionaron los demás ... tenemos una clase llamada ''activa'' para indicar la pestaña activa, NO la pseudo-clase '': activo.'' Podríamos haberlo nombrado fácilmente con cualquier cosa, sin embargo ... seleccionado, actual, 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>
Prueba esto. Mantiene el color hasta que se hace clic en otro elemento.
<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>
Suponiendo que desea cambiar el color de la pestaña / enlace seleccionado actualmente ... lo mejor es aplicar una clase (por ejemplo, active ) a la pestaña / enlace actualmente seleccionada y luego darle un estilo diferente.
Ejemplo de estilo podría ser:
li.active, a.active {
background-color: #f90;
}
Uso PHP para buscar la URL y hacer coincidir el nombre de la página (sin la extensión de .php, también puedo agregar varias páginas que tengan la misma palabra en común como contacto, formulario de contacto, etc. Se agregará esa clase) y agregar una clase con PHP para cambiar el color, etc. Para eso tendría que guardar sus páginas con la extensión de archivo .php .
Aquí hay una demo. Cambie sus enlaces y páginas según sea necesario. La clase CSS para todos los enlaces es .tab y para el enlace activo también hay otra clase de .currentpage (como es la función PHP), por lo que es donde sobrescribirás tus reglas CSS. Podrías nombrarlos como quieras.
<?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-->