Español
Para ayudar a un amigo, escribí algunas pestañas sencillas y las dediqué a amigos necesitados. 1) Llamar a varios puntos
<html> <head> <style> body { text-align:center } .tab { width:432px; height:208px; overflow:hidden; } .menu,.menu li { margen:0; relleno:0; altura:24px; estilo de lista:ninguno; desbordamiento:alineación de texto:centro } .menu {borde-inferior:1px sólido #cccccc; .menu .default { ancho:84px; float:left; tamaño de fuente:10pt; altura de línea:1.5; margen izquierdo:1px; puntero;url('') sin repetición. activo { ancho:84px; flotante:izquierda; tamaño de fuente:10pt; altura de línea:1.5; fondo:url('') no repetir; } #más { ancho: 76px; cursor: puntero color: #FF0000; -align:right } .con { ancho:422px; alto:184px; margen:0 auto } </style> <head> <body> <script> function init(ids,cons,dis){ document.getElementById(ids ).getElementsByTagName('li')[0].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; // document.getElementById(ids).onmouseover= function(){onmousOver(ids,cons,dis);}//El puntero del mouse activa el efecto document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//El clic activa el efecto} función onmousOver(ids,cons,dis){ o = o || window.event; var obj=o.target || o.srcElement; className==' active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li'); 1;i++) {o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis +obj.id ).innerHTML;} } } </script> <!--#1--> <div class='tab'> <ul id='nav1' class='menu'> <li id=" l1" class= 'default'>Primera Noticia</li> <li id="l2" class='default'>Segunda Noticia</li> <li id="l3" class='default'>Tercera Noticia</ li > <li id="l4" class='default'>La Cuarta Noticia</li> <li id="l5" class='default'>La Quinta Noticia</li> </ul> <div class= ' con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>He estado buscando una pestaña en el foro para Durante mucho tiempo no existe un efecto ideal</span> </div> <div id="div1_l2"> <span>Así que estoy aquí para preguntarles a los expertos, ¡por favor ayuden! </span> </div> <div id="div1_l3"> <span>Encontré algunos para cambiar, pero el menú en el encabezado es demasiado difícil de ubicar </span> </div> <div id=. " div1_l4"> <span> Cambiará cuando se coloque el mouse sobre él, ¡no es necesario hacer clic! </span> </div> <div id="div1_l5"> <span>¡Agregado! </span> </div> </div> <script> init('nav1','con1',"div1_"); </script> <!--#2--> <div class='tab'); > <ul id='nav2' class='menu'> <li id="l1" class='default'>Primera noticia</li> <li id="l2" class='default'>Segunda noticia </ li> <li id="l3" class='default'>La tercera noticia</li> <li id="l4" class='default'>La cuarta noticia</li> <li id="more "> <a href="#" target=_blank>Más>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div estilo ="display:none"> <div id="div2_l1"> <span>Quiero hacer una pestaña, pero llevo mucho tiempo buscándola en el foro sin el efecto ideal</span> </div > <div id= "div2_l2"> <span>Así que estoy aquí para preguntarles a los expertos, ¡por favor ayúdenme! </span> </div> <div id="div2_l3"> <span>Encontré algunos para cambiar, pero el menú en el encabezado es demasiado difícil de ubicar </span> </div> <div id=. " div2_l4"> <span> ¡Cambiará cuando se coloque el mouse sobre él, sin hacer clic! </span> </div> </div> <script> init('nav2','con2',"div2_"); </script> <!--#3--> <div class='tab'); > <ul id='nav3' class='menu'> <li id="l1" class='default'>Primera noticia</li> <li id="l2" class='default'>Segunda noticia </ li> <li id="l3" class='default'>Tercera noticia</li> <li id="more" style="width:160px"><a href="#" target=_blank> Más>> </a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id ="div3_l1" > <span>Quiero hacer una pestaña, pero llevo mucho tiempo buscándola en el foro sin lograr el efecto ideal</span> </div> <div id="div3_l2"> <span>Así que Estoy aquí para preguntarles a los expertos. ¡Por favor ayuden! </span> </div> <div id="div3_l3"> <span>Encontré algunos para cambiar, pero el menú en el encabezado es demasiado difícil de ubicar </span> </div> </div>. < script> init('nav3','con3',"div3_"); </script> </body> </html>
