Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: SoCu en 28 de Febrero 2017, 15:29
-
Hola, tengo el siguiente código que me muestra un texto al pulsar sobre un enlace, pero si pulso sobre otro enlace sigue mostrando el texto anterior.
Que código tengo que poner para que si pulso otro enlace oculte el texto que se este mostrando, o si el código que hay que poner es mas fácil hacerlo para que al pulsar pulsar cualquier enlace oculte todos los textos tambien me sirve.
Este es el codigo con el que muestro el contenido de un enlace:
<html>
<head>
<script>
function mostrar(id) {
obj = document.getElementById(id);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
</head>
<body>
<a href="#" onclick="mostrar('divTexto1'); return false" />Mostrar/Ocultar contenido UNO</a>
<div id="divTexto1" style="visibility:hidden">
Texto 1
</div>
<BR>
<a href="#" onclick="mostrar('divTexto2'); return false" />Mostrar/Ocultar contenido DOS</a>
<div id="divTexto2" style="visibility:hidden">
Texto 2</div>
<BR>
<a href="#" onclick="mostrar('divTexto3'); return false" />Mostrar/Ocultar contenido TRES</a>
<div id="divTexto3" style="visibility:hidden">
Texto 3
</div>
<BR>
<a href="#" onclick="mostrar('divTexto4'); return false" />Mostrar/Ocultar contenido CUATRO</a>
<div id="divTexto4" style="visibility:hidden">
Texto 4</div>
<BR>
<a href="#" onclick="mostrar('divTexto5'); return false" />Mostrar/Ocultar contenido CINCO</a>
<div id="divTexto5" style="visibility:hidden">
Texto 5
</div>
<BR>
<a href="#" onclick="mostrar('divTexto6'); return false" />Mostrar/Ocultar contenido SEIS</a>
<div id="divTexto6" style="visibility:hidden">
Texto 6
</div>
<BR>
<a href="#" onclick="mostrar('divTexto7'); return false" />Mostrar/Ocultar contenido SIETE</a>
<div id="divTexto7" style="visibility:hidden">
Texto 7
</div>
<BR>
<a href="#" onclick="mostrar('divTexto8'); return false" />Mostrar/Ocultar contenido OCHO</a>
<div id="divTexto8" style="visibility:hidden">
Texto 8</div>
<BR>
<a href="#" onclick="mostrar('divTexto9'); return false" />Mostrar/Ocultar contenido NUEVE</a>
<div id="divTexto9" style="visibility:hidden">
Texto 9
</div>
<BR>
<a href="#" onclick="mostrar('divTexto10'); return false" />Mostrar/Ocultar contenido DIEZ</a>
<div id="divTexto10" style="visibility:hidden">
Texto 10</div>
<BR>
</div>
</body>
</html>
un saludo.
-
Hola SoCu,
no sé si te refieres a esto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
display:block;
text-decoration:none;
}
#divTexto1{
position:absolute;
top:20%;
left:30%;
font-size:5em;
text-shadow: 2px 2px 10px grey;
text-decoration:underline;
visibility:hidden
}
</style>
</head>
<body>
<a href="#" title='presiona para mostrar/desaparecer'>Mostrar/Ocultar contenido UNO</a>
<a href="#" title='presiona para mostrar/desaparecer'>Hola que tal</a>
<a href="#" title='presiona para mostrar/desaparecer'>Hi, folks! </a>
<div id="divTexto1" >
Texto 1
</div>
<script>
(function autoEjecutable(){
var obj = document.getElementsByTagName('a'); // elementos que son enlace
var elemento = document.getElementById('divTexto1'); // donde escribimos texto
var valor = true; // contador para par o impar
for(var i=0; i< obj.length; i++) {
obj[i].addEventListener("click", bindClick());
}
function bindClick() {
return function(){
if (valor == false){
elemento.style.visibility = 'hidden';
valor = true;
}else{
elemento.style.visibility = 'visible';
valor = false;
};
};
}
})();
</script>
</body>
</html>
-
Hola bermartinv, perdona que no te respondiese antes, pensaba que nadie había comentado nada en el post porque no he recibido ninguna notificación de nuevas respuestas.
No es eso exactamente, aparece el mismo texto para los tres botones, el texto es diferente para cada botón.
Por ejemplo, poner oculto unos números a cada nombre:
Juan
1111111
Pedro
2222222
Antonio
3333333
Solo se ven los nombres, y cuando pulse en Juan me muestra sus números, si vuelvo a pulsar en Juan los ocultaría.
Pero también si pulso en Juan me muestra los numero, y si luego pulso en Pedro me mostraría los números de Pedro y a la vez ocultaría los de Juan.
Salu2
-
Bueno ya lo he podido hacer, dejo el código por si le puede servir a alguien que como yo no este muy puesto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mostrar Div y Ocultar Otro</title>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- INFORAMCION 1 -->
<div class="col-sm-4 col-xs well">
<a href="#info1" class="inf">Block 1</a>
</div>
<div id="info1" class="col-xs-12 well oculto">
<p>Texto 1</p>
</div>
<!-- INFORAMCION 2 -->
<div class="col-sm-4 col-xs well">
<a href="#info2" class="inf">Block 2</a>
</div>
<div id="info2" class="col-xs-12 well oculto">
<p>Texto 2</p>
</div>
<!-- INFORAMCION 3 -->
<div class="col-sm-4 col-xs well">
<a href="#info3" class="inf">Block 3</a>
</div>
<div id="info3" class="col-xs-12 well oculto">
<p>Texto 3</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
$(".oculto").hide();
$(".inf").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide("slow");
$(nodo).fadeToggle("fast");
return false;
}
});
});
</script>
</body>
</html>
El texto ira centrado en la pagina, y me gustaría poner el estilo de texto que tu has puesto pero sin ir subrayado, pero al tener el DIV ya un ID como puedo poner ese estilo al texto ?
Salu2.
-
Hola SoCu,
te puse ese código que era lo que había entendido en tu explicación.
He visto tu código que has hecho ahora. Ví que al final lo has hecho con jQuery.
Saludos.
-
Hola bermartinv, si pero como comento al final del post anterior, igual como esta después del código no lo has llegado a ver, lo que quiero es poner el mismo texto o estilo de texto que tu has puesto en tu ejemplo, pero en el codigo que yo he puesto no se como poner para que salta el mismo.
Un saludo.
-
Adjunto código para que le eches un vistazo.
A este tipo de funciones se le llama CLOSURES ( y cuesta al principio un poco de verlo)
https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=854:closures-javascript-ejemplos-concepto-que-son-y-para-que-sirven-retardar-ejecucion-settimeout-cu01169e-&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206 (https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=854:closures-javascript-ejemplos-concepto-que-son-y-para-que-sirven-retardar-ejecucion-settimeout-cu01169e-&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
display:block;
text-decoration:none;
}
.desaparecer{
display : none;
}
.aparecer{
display: block;
font-size:5em;
text-shadow: 2px 2px 10px grey;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="#" title='presiona para mostrar/desaparecer'>Mostrar/Ocultar contenido UNO</a>
<p class='desaparecer'> Aquí estamos </p>
<a href="#" title='presiona para mostrar/desaparecer'>Hola que tal</a>
<p class='desaparecer'> Aquí estamos </p>
<a href="#" title='presiona para mostrar/desaparecer'>Hi, folks! </a>
<p class='desaparecer'> Aquí estamos </p>
<script>
(function autoEjecutable(){
var obj = document.getElementsByTagName('a'); // elementos que son enlace
for(var i=0; i< obj.length; i++) {
obj[i].addEventListener("click", bindClick());
}
function bindClick() {
var valor = true;
return function(){
if (valor==true){
this.nextElementSibling.removeAttribute('class','desaparecer');
this.nextElementSibling.setAttribute('class','aparecer');
valor = false;
}else{
this.nextElementSibling.removeAttribute('class','aparecer');
this.nextElementSibling.setAttribute('class','desaparecer');
valor = true;
};
};
}
})();
</script>
</body>
</html>
Saludos ;)
-
Gracais bermartinv, mira ya lo he conseguido, no he visto la modificación que hiciste en el post para poner el código porque no me llego notificación, solo llego cuando colocaste el link a esa pagina.
De todas formas me copie ese código por si puedo utilizarlo, ya que en este caso el funcionamiento no llega a ser el que estoy buscando.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Textos</title>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css">
a{
display:block;
text-decoration:none;
}
body {
background-color: white;
background-image: url(fondo.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.texto1{
font-size:70px;
text-shadow: 2px 2px 10px black, 0 0 0 white, 0 0 0.2em grey; color: black;
margin-top: 0px;
margin-bottom: 0px;
}
.texto2{
font-size:50px;
text-shadow: 2px 2px 10px black, 0 0 0 white, 0 0 0.2em grey; color: Red;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<center>
<div class="container-fluid">
<div class="row">
<p>
<p>
<div class="col-sm-4 col-xs well">
<a href="#info1" class="inf">Pulsa para mostrar texto 1</a>
</div>
<div id="info1" class="col-xs-12 well oculto">
<p class="texto1">Texto 1</p>
<p class="texto2">Texto 1</p>
</div>
<p>
<p>
<div class="col-sm-4 col-xs well">
<a href="#info2" class="inf">Pulsa para mostrar texto 2</a>
</div>
<div id="info2" class="col-xs-12 well oculto">
<p class="texto1">Texto 2</p>
<p class="texto2">Texto 2</p>
</div>
<p>
<p>
<div class="col-sm-4 col-xs well">
<a href="#info3" class="inf">Pulsa para mostrar texto 3</a>
</div>
<div id="info3" class="col-xs-12 well oculto">
<p class="texto1">Texto 3</p>
</div>
<p>
<p>
<div class="col-sm-4 col-xs well">
<a href="#info4" class="inf">Pulsa para mostrar texto 4</a>
</div>
<div id="info4" class="col-xs-12 well oculto">
<p class="texto2">Texto 4</p>
</div>
</div>
</div>
</center>
<script type="text/javascript">
jQuery(document).ready(function(){
$(".oculto").hide();
$(".inf").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide("slow");
$(nodo).fadeToggle("fast");
return false;
}
});
});
</script>
</body>
</html>
-
Me alegro que hayas conseguido lo que buscabas.
En mi código no solo se puede ver un texto, cada texto va independiente de los demás y da igual que esté visible uno u otros, son independientes.
Saludos