JavaScript - Elementos subrayados click

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Elementos subrayados click

Publicado por xve (2100 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 clara

No me gusta: Está respuesta no esta clara o no es útil

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:

<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

Comentar

Pos: 2

Val: 3.162

Elementos subrayados click

Publicado por xve (2100 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

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

Comentar

Pos: 2

Val: 3.162

Elementos subrayados click

Publicado por xve (2100 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ú

<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

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:

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

he puesto esto:

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

Gracias de nuevo,
Un saludo.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Elementos subrayados click

Publicado por xve (2100 intervenciones) el 13/07/2017 16:03:09

Es perfecto!!! Gracias por comentarlo Isabel

Valora esta respuesta

Comentar

Fallo de Flujo

Error con radio button en javascript