Enlaces #

#1 (**permalink**) 13/05/2017, 16:10

Estimados, tengo un problema que esta en la sección css, pero que talvez pueda ser repondido rápidamente acá, tengo enlaces de este tipo:

<a href="#contenido1">1</a>
<a href="#contenido2">2</a>
<a href="#contenido3">3</a>

La consulta es si se puede de alguna forma engañar al explorador y no "almacenar", o más bien no ir a estos, todo esto es porque es para un menu, y la idea es no tener problemas con el boton atras.

Saludos

caricatos · #2 (**permalink**) 13/05/2017, 17:20

Hola:

Hay variantes... Si no pretendes enlazar, no usar enlaces...
- cancelar el enlace (return false/preventDefault)
... o tal vez importe que sea un enlace por razones tal vez siniestras (SEO por ejemplo)... y habría que analizar esa situación.

Saludos

#3 (**permalink**) 13/05/2017, 19:38

Jajajaja, no, no es nada malicioso, es algo super sencillo, te muestro:

Código HTML:

Ver original<!doctype html>
 
<html>
<head>
<style>
 
*{
padding:0px;
margin:0px;
}
 
div{
width:0;
height:0;
overflow:hidden;
margin-left:150px;
transition:margin-left 0.5s;
box-sizing:border-box;
}
 
div:target{
width: 500px;
height: 100%;
overflow: auto;
margin-left:0px;
border: 1px #ccc solid;
}
</style>
 
</head>
 
<body>
 
<a href="#contenido1">Menu 1</a>
<a href="#contenido2">Menu 2</a>
<a href="#contenido3">Menu 3</a>
<a href="#contenido4">Menu 4</a>
<a href="#contenido5">Menu 5</a>
 
 
<div id="contenido1">Contenido 1</div>
<div id="contenido2">Contenido 2</div>
<div id="contenido3">Contenido 3</div>
<div id="contenido4">Contenido 4</div>
<div id="contenido5">Contenido 5</div>
 
</body>
</html>

Si lo miras verás lo del tema de la flecha atras, y sí use esas variantes y cancela el target del css. por eso pido lo que pido, jajaja

use tanto:
onclick="return false;"
onclick="event.preventDefault();"

Saludos.

caricatos · #4 (**permalink**) 14/05/2017, 02:21

Hola:

Parece un sistema de pestañas, que se puede hacer con javascript... por ejemplo poniendo una clase (css) con los estilos de la ventana cerrada y otra clase con los estilos de las abiertas... o sea
div.cerrada{
/* lo que es "div" */
}

div.abierta{
/* lo del target... */
}

luego con javascript

onclick = seleccionada.className = "abierta"...

Falta la parte de cerrar lo que esté abierto...

Saludos