js- Mostrar y ocultar divs. Ayuda

70N1 · 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 [Seleccionar]


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);
     
 
 };

MinusFour · 3 Agosto 2014, 19:22 PM

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

Código (HTML4Strict) [Seleccionar]

  <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 (javascript) [Seleccionar]


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 (css) [Seleccionar]


.visible {
    display: block;
}

.oculto {
    display: none;
}

70N1 · 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 [Seleccionar]


<!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>

Test Foro de elhacker.net SMF 2.1

js- Mostrar y ocultar divs. Ayuda

70N1

MinusFour

70N1