JavaScript - Elementos subrayados click

   
Vista:

Elementos subrayados click

Publicado por isabel (10 intervenciones) el 10/07/2017 12:13:10
Buenos días,
tengo un menú que redirecciona a una u otra página según donde hagas click. No sé si se puede hacer con javascript, porque en cuanto lo pinchas se carga otra página y entonces el efecto se quita. Cuál es la mejor opción para hacer este efecto?
muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Elementos subrayados click

Publicado por xve (1912 intervenciones) el 10/07/2017 19:38:37
Hola Isabel, no me queda clara tu pregunta... nos puedes comentar con mas detalle?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Elementos subrayados click

Publicado por isabel (10 intervenciones) el 11/07/2017 13:44:08
Perdón, me ha faltado una frase. Es un menú normal, cada enlace te lleva a una página. Mi problema es que metiendo este código adjunto el li sólo cambia a color rojo un segundo y vuelve a estar como antes. Yo quiero que se quede rojo.
Te adjunto código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<header class="menuAdmin">
            <h1><img src="../img/LOGOSS.svg" width="30"></h1>
            <nav>
                <ul>
                    <div class="grupoPanel">
                        <a href="trabajos.php" class="activoAdmin"><li>Trabajos</li></a>
                   <a href="nuevotrabajo.php"> <li>+Nuevo trabajo</li></a>
                    <a href="tipostrabajo.php"><li>Tipos de trabajo</li></a>
                    </div>
                     <div class="grupoPanel">
                    <a href="entradas.php"><li>Entradas</li></a>
                    <a href="nuevaentrada.php"><li>+Nueva entrada</li></a>
                   <a href="categorias.php"> <li>Categorías</li></a>
                     </div>
                    <a href="comentarios.php"><li>Comentarios </li></a>
                    <a href="salir.php"><li>Salir </li></a>
                </ul>
            </nav>
        </header>
 
 
 
        <div class="panelAdmin">
            <script>
               var li= document.getElementsByTagName("li");
 for (var i = 0; i < 8; i++) {
li[i].onclick = function(){
    li[0].style.color= "red";
    console.log(li[i].style.color);
};
};
 
             </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Elementos subrayados click

Publicado por xve (1912 intervenciones) el 11/07/2017 16:06:55
Segun entiendo viendo el código, el activo es el que tiene la clase "activoAdmin" verdad?

Segun entiendo, según la pagina que este tendrás que poner esa clase CSS al enlace verdad?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Elementos subrayados click

Publicado por isabel (10 intervenciones) el 11/07/2017 16:10:59
Si. Eso es lo que quiero hacer. La clase activoAdmin simplemente es un subrayado.
De momento he probado a poner el texto en color rojo, para probar sólo; pero no me sale; sólo se pone rojo el texto un momento, porque creo que en cuanto carga la página del enlace se 'resetea' el javascript y vuelve a quedarse negro, como estaba antes vamos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Elementos subrayados click

Publicado por xve (1912 intervenciones) el 11/07/2017 20:26:53
Hola Isabel, la manera de hacerlo, es sabiendo en que pagina nos encontramos para posteriormente darle el estilo.

Mira este código que te he preparado, selecciona la pagina en la que te encuentres del menú

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<header class="menuAdmin">
    <h1><img src="../img/LOGOSS.svg" width="30"></h1>
    <nav>
        <ul>
            <div class="grupoPanel">
                <li><a href="trabajos.php" class="activoAdmin">Trabajos</a></li>
                <li><a href="nuevotrabajo.php">+Nuevo trabajo</a></li>
                <li><a href="tipostrabajo.php">Tipos de trabajo</a></li>
            </div>
            <div class="grupoPanel">
                <li><a href="entradas.php">Entradas</a></li>
                <li><a href="nuevaentrada.php">+Nueva entrada</a></li>
                <li><a href="categorias.php">Categorías</a></li>
            </div>
            <li><a href="comentarios.php">Comentarios </a></li>
            <li><a href="salir.php">Salir </a></li>
        </ul>
    </nav>
</header>
 
<script>
var li= document.getElementsByTagName("li");
var paginaActual=location.pathname.split("/").slice(-1)[0];
 
for(var i=0;i<li.length;i++)
{
	pagina=li[i].getElementsByTagName("a")[0].href.split("/").slice(-1)[0];
	if(pagina==paginaActual)
	{
		li[i].style.color= "red";
	}
}
</script>

Si hay algo que no entiendas comentas, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Elementos subrayados click

Publicado por isabel (10 intervenciones) el 13/07/2017 12:51:25
Genial, muchísimas gracias por tu ayuda, la verdad es que da gusto cuando se encuentra a gente tan dispuesta a colaborar así.

Me funciona perfectamente, aunque he cambiado una pequeña cosa, en vez de:

1
pagina=li[i].getElementsByTagName("a")[0].href.split("/").slice(-1)[0];

he puesto esto:

1
pagina=document.getElementsByTagName("a")[i].href.split("/").slice(-1)[0];

Gracias de nuevo,
Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Elementos subrayados click

Publicado por xve (1912 intervenciones) el 13/07/2017 16:03:09
Es perfecto!!! Gracias por comentarlo Isabel
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar