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?
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);
};
Sería más fácil en jQuery, pero esto es lo que logre:
<div class="visible">Hey
</div> <div class="oculto">Hola
</div> <div class="oculto">Que tal
</div> <div class="oculto">Bien
</div> <input value="Next" type="button" onclick="siguiente()">
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";
}
}
.visible {
display: block;
}
.oculto {
display: none;
}
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.
<!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>