Français
Pour aider un ami, j'ai écrit quelques onglets simples et les ai dédiés à des amis dans le besoin. 1) Appelez plusieurs points
<html> <head> <style> body { text-align:center } .tab { width:432px margin:0 auto; } .menu,.menu li { margin:0; padding:0; list-style:none; text-align:center } .menu { border-bottom:1px solid #cccccc; .menu .default { width:84px; float:left; font-size:10pt; margin-left:1px; actif { width:84px; float:left; font-size:10pt; line-height:1.5; no-repeat; } #more { width:76px; float:left; font-size:1.5; margin-left:1px; -align:right } .con { width:422px; height:184px; margin: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);}//Le pointeur de la souris déclenche l'effet document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//Le clic déclenche l'effet} function 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'>Première nouvelle</li> <li id="l2" class='default'>Deuxième nouvelle</li> <li id="l3" class='default'>Troisième nouvelle</ li > <li id="l4" class='default'>La Quatrième Nouvelles</li> <li id="l5" class='default'>La Cinquième Nouvelles</li> </ul> <div class= ' con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>Je cherchais un onglet dans le forum depuis un depuis longtemps. Il n'y a pas d'effet idéal</span> </div> <div id="div1_l2"> <span>Je suis donc ici pour demander aux experts, aidez-moi s'il vous plaît ! </span> </div> <div id="div1_l3"> <span>J'en ai trouvé quelques-uns à modifier, mais le menu dans l'en-tête est trop difficile à localiser. " div1_l4"> <span> Cela changera lorsque la souris sera placée dessus, pas besoin de cliquer ! </span> </div> <div id="div1_l5"> <span>Ajouté ! </span> </div> </div> <script> init('nav1','con1',"div1_"); </script> <!--#2--> <div class='tab' > <ul id='nav2' class='menu'> <li id="l1" class='default'>Première nouvelle</li> <li id="l2" class='default'>Deuxième nouvelle </ li> <li id="l3" class='default'>La troisième nouvelle</li> <li id="l4" class='default'>La quatrième nouvelle</li> <li id="more "> <a href="#" target=_blank>Plus>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div style ="display:none"> <div id="div2_l1"> <span>Je souhaite créer un onglet, mais je le cherche depuis longtemps sur le forum sans l'effet idéal</span> </div > <div id= "div2_l2"> <span>Je suis donc ici pour demander aux experts, aidez-moi s'il vous plaît ! </span> </div> <div id="div2_l3"> <span>J'en ai trouvé quelques-uns à modifier, mais le menu dans l'en-tête est trop difficile à localiser. " div2_l4"> <span> Cela changera lorsque la souris sera placée dessus, sans cliquer ! </span> </div> </div> <script> init('nav2','con2',"div2_"); </script> <!--#3--> <div class='tab' > <ul id='nav3' class='menu'> <li id="l1" class='default'>Première nouvelle</li> <li id="l2" class='default'>Deuxième nouvelle </ li> <li id="l3" class='default'>Troisième nouvelle</li> <li id="more" style="width:160px"><a href="#" target=_blank> Plus>> </a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id="div3_l1" > <span>Je veux faire un onglet, mais je le cherche depuis longtemps sur le forum sans l'effet idéal</span> </div> <div id="div3_l2"> <span>Alors je Je suis ici pour demander aux experts. Hé les gars, aidez-moi s'il vous plaît ! </span> </div> <div id="div3_l3"> <span>J'en ai trouvé quelques-uns à modifier, mais le menu dans l'en-tête est trop difficile à localiser. <script> init('nav3','con3',"div3_"); </script> </body> </html>
