elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  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] Ir Abajo Respuesta Imprimir
Autor Tema: js- Mostrar y ocultar divs. Ayuda  (Leído 1,652 veces)
70N1


Desconectado Desconectado

Mensajes: 355


Ver Perfil
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 Desconectado

Mensajes: 5.289


I'm fourth.


Ver Perfil WWW
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
  1.  <div id="nav">
  2.        <div class="visible">Hey</div>
  3.        <div class="oculto">Hola</div>
  4.        <div class="oculto">Que tal</div>
  5.        <div class="oculto">Bien</div>
  6.    </div>
  7. <input value="Next" type="button" onclick="siguiente()">


Código
  1. function siguiente(){                        
  2.    var pagina=document.getElementsByClassName("visible");
  3.    if(pagina[0].nextElementSibling != null && pagina[0].nextElementSibling.className == "oculto"){
  4.        pagina[0].nextElementSibling.className = "visible";  
  5.        pagina.item(0).className = "oculto";
  6.    }
  7. }

Código
  1. .visible {
  2.    display: block;
  3. }
  4.  
  5. .oculto {
  6.    display: none;
  7. }


En línea

70N1


Desconectado Desconectado

Mensajes: 355


Ver Perfil
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 Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ocultar y mostrar elementos una vez logueado.
PHP
XXXXXX 3 5,970 Último mensaje 5 Abril 2011, 21:44 pm
por takipunk
Ocultar/Mostrar panel
Java
Xedrox 3 15,180 Último mensaje 6 Julio 2011, 02:50 am
por Xedrox
Mostrar y ocultar div con deslizamiento « 1 2 »
Desarrollo Web
Poizonus 10 7,167 Último mensaje 21 Julio 2011, 16:47 pm
por Poizonus
Mostrar/Ocultar « 1 2 »
.NET (C#, VB.NET, ASP)
SγиtαxEяяoя 19 6,071 Último mensaje 4 Junio 2013, 19:05 pm
por Eleкtro
ayuda, ocultar, mostrar filas con javascript.
Desarrollo Web
ameagle04 1 2,111 Último mensaje 5 Febrero 2016, 00:58 am
por CeLaYa
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines