js- Mostrar y ocultar divs. Ayuda

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

js- Mostrar y ocultar divs. Ayuda

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: js- Mostrar y ocultar divs. Ayuda (Leído 2,595 veces)

70N1

Desconectado

Mensajes: 355

js- Mostrar y ocultar divs. Ayuda

« en: 3 Agosto 2014, 16:21 pm »

Este es el code que e creado: es para una paginacion y quiero mostrar solo 10 paginas: 1-2-3-4-5-6-7-8-9-10-next

Al hacer click en next deberia esconder el 1 y mostrar el 11.

Me podeis ayudar?

Código:

function siguiente(){
                             
		var pagina=document.getElementsByClassName("visible");
		
		
		  alert(pagina.item(pagina.length-1).id);
		     
	var	pagina2= document.getElementById(pagina.item(pagina.length-1).id);
		pagina2.className="oculto";
		 
		 alert("entro1 "+pagina2.className);
		 
		 
		 
		 
		 var pagina1=document.getElementsByClassName("oculto");
		 
		 
		 alert("ab "+pagina1.item(pagina1.length-1).id);
		 
		var pagina3=document.getElementById(pagina1.item(pagina1.length-1).id);
		 pagina3.className="visible";
		 
		 alert("entro2 "+pagina3.className);
		
		   alert("visible :"+pagina.length+"- oculto :"+pagina1.length);
		   
	
	};


	En línea

70N1

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

Re: js- Mostrar y ocultar divs. Ayuda

« Respuesta #1 en: 3 Agosto 2014, 19:22 pm »

Sería más fácil en jQuery, pero esto es lo que logre:

Código

  <div id="nav">
        <div class="visible">Hey</div>
        <div class="oculto">Hola</div>
        <div class="oculto">Que tal</div>
        <div class="oculto">Bien</div>
    </div>
<input value="Next" type="button" onclick="siguiente()">

Código

function siguiente(){                        
    var pagina=document.getElementsByClassName("visible");
    if(pagina[0].nextElementSibling != null && pagina[0].nextElementSibling.className == "oculto"){
        pagina[0].nextElementSibling.className = "visible";  
        pagina.item(0).className = "oculto";
    }
}

Código

.visible {
    display: block;
}
 
.oculto {
    display: none;
}


	En línea

70N1

Desconectado

Mensajes: 355

Re: js- Mostrar y ocultar divs. Ayuda

« Respuesta #2 en: 9 Agosto 2014, 23:02 pm »

Muchas gracias, me a servido de mucho.

Dejo el code aki por si alguien lo busca, tiene los botones atras y alante mostrando 5 elementos.

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="client/css/visiblehidden.css" rel="stylesheet" type="text/css">
<script type="text/javascript">


    function siguiente(){  
	//alert(document.getElementById('2').nextElementSibling.id);
	  var contenido=document.getElementsByClassName('visible'); 
	  var Nitem=contenido.item(4).id;
	  alert(Nitem);
var nex=document.getElementById(Nitem).nextElementSibling;             
var pre=document.getElementById(Nitem).previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling;
 nex.className='visible';
 pre.className='oculto';
       }
	
	function anterior(){
		
		
		   //alert(document.getElementById('2').previousElementSibling.id);
 var contenido=document.getElementsByClassName('visible'); 
	  var Nitem=contenido.item(0).id;
var nex=document.getElementById(Nitem).nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;             
var pre=document.getElementById(Nitem).previousElementSibling;
 nex.className='oculto';
 pre.className='visible';
		
		}
	
	</script>
</head>

<body>


<div id="nav">
       <div id="1" class="visible">1</div>
       <div id="2" class="visible">2</div>
       <div id="3" class="visible">3</div>
       <div id="4" class="visible">4</div>
       <div id="5" class="visible">5</div>
       <div id="6" class="oculto">6</div>
       <div id="7" class="oculto">7</div>
       <div id="8" class="oculto">8</div>
   </div>
<input value="Next" type="button" onclick="siguiente()">
<input value="anterior" type="button" onclick="anterior()">
</body>
</html>


	En línea

70N1

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Ocultar y mostrar elementos una vez logueado. PHP	XXXXXX	3	7,022	5 Abril 2011, 21:44 pm por takipunk
	Ocultar/Mostrar panel Java	Xedrox	3	16,977	6 Julio 2011, 02:50 am por Xedrox
	Mostrar y ocultar div con deslizamiento « 1 2 » Desarrollo Web	Poizonus	10	9,824	21 Julio 2011, 16:47 pm por Poizonus
	Mostrar/Ocultar « 1 2 » .NET (C#, VB.NET, ASP)	SγиtαxEяяoя	19	8,388	4 Junio 2013, 19:05 pm por Eleкtro
	ayuda, ocultar, mostrar filas con javascript. Desarrollo Web	ameagle04	1	3,772	5 Febrero 2016, 00:58 am por CeLaYa