한국어
친구를 돕기 위해 몇 가지 간단한 탭을 작성하여 도움이 필요한 친구들에게 바쳤습니다. 1) 여러 지점 호출
<html> <head> <style> body { text-align:center } .tab { width:432px; margin:0 auto; Overflow:hidden; } .menu,.menu li { 여백:0; 높이: 24px; 오버플로: 숨김: 텍스트 정렬: 센터; .menu .default { 폭:왼쪽; 글꼴 크기:10pt; 여백-왼쪽:1px; 배경:url('') .menu 활성 { 폭:84px; 글꼴-크기:1.5; 여백-왼쪽:1px; 배경:#FFFFFF; no-repeat; } #more { 폭:왼쪽; 글꼴-크기:1.5; 커서:포인터:#FF0000; -align:right } .con { 너비:422px; 여백:0 자동 } </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);}//마우스 포인터가 효과를 트리거합니다 document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//클릭이 트리거됩니다 효과} 함수 onmousOver(ids,cons,dis){ o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI') className==' active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li') for (var i=0;i<=o.length- 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'>첫 번째 뉴스</li> <li id="l2" class='default'>두 번째 뉴스</li> <li id="l3" class='default'>세 번째 뉴스</li> li > <li id="l4" class='default'>네 번째 소식</li> <li id="l5" class='default'>다섯 번째 소식</li> </ul> <div class= ' con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>저는 포럼에서 다음과 같은 탭을 찾고 있었습니다. 오랜 시간이 걸려도 이상적인 효과는 없습니다.</span> </div> <div id="div1_l2"> <span>그래서 전문가들에게 묻고 싶습니다. 도와주세요! </span> </div> <div id="div1_l3"> <span>변경할 몇 가지를 찾았지만 헤더의 메뉴를 찾기가 너무 어렵습니다. </span> </div> <div id= " div1_l4"> <span> 마우스를 올려놓으면 변경되므로 클릭할 필요가 없습니다! </span> </div> <div id="div1_l5"> <span>추가되었습니다! </span> </div> </div> <script> init('nav1','con1',"div1_") </script> <!--#2--> <div class='tab' > <ul id='nav2' class='menu'> <li id="l1" class='default'>첫 번째 뉴스</li> <li id="l2" class='default'>두 번째 뉴스 </li> li> <li id="l3" class='default'>세 번째 소식</li> <li id="l4" class='default'>네 번째 소식</li> <li id="more "> <a href="#" target=_blank>더보기>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div 스타일 ="display:none"> <div id="div2_l1"> <span>탭을 만들고 싶은데 오랫동안 포럼에서 찾았는데 이상적인 효과가 없습니다</span> </div > <div id= "div2_l2"> <span>그래서 전문가들에게 묻고 싶습니다. 도와주세요! </span> </div> <div id="div2_l3"> <span>변경할 몇 가지를 찾았지만 헤더의 메뉴를 찾기가 너무 어렵습니다. </span> </div> <div id= " div2_l4"> <span> 클릭하지 않고 마우스를 올려 놓으면 변경됩니다! </span> </div> </div> <script> init('nav2','con2',"div2_") </script> <!--#3--> <div class='tab' > <ul id='nav3' class='menu'> <li id="l1" class='default'>첫 번째 뉴스</li> <li id="l2" class='default'>두 번째 뉴스 </li> li> <li id="l3" class='default'>세 번째 소식</li> <li id="more" style="width:160px"><a href="#" target=_blank> 더보기>> </a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id ="div3_l1" > <span>탭을 만들고 싶지만 오랫동안 포럼에서 찾았지만 이상적인 효과가 없었습니다.</span> </div> <div id="div3_l2"> <span>그래서 저는 전문가에게 물어보려고 왔습니다. 여러분, 도와주세요! </span> </div> <div id="div3_l3"> <span>변경할 부분을 몇 개 찾았는데 헤더에 있는 메뉴를 찾기가 너무 어렵습니다. </span> </div> </div> < script> init('nav3','con3',"div3_") </script> </body> </html>
