JavaScript之Tab標簽（原始版）
阿新 • • 發佈：2017-10-28
html ole body mouseover contents 處理 lin var 封裝
最原始的Tab標簽頁，只需再添加CSS樣式即可，重點在於Tab標簽底部邊框樣式的處理。待完善：代碼的封裝與復用。
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div.tab div{ display: inline; padding: 5px; margin:5px; } /*.hover{ border-bottom: 2px solid white; border-top: 1px solid blue; border-left: 1px solid blue; border-right: 1px solid blue; border-top-left-radius: 4px; border-top-right-radius: 4px; } .out{ border-bottom: none; border-top: none; border-left: none; border-right: none; border-top-left-radius: 0; border-top-right-radius: 0; }*/ div.content{ height: 158px; width: 185px; overflow: hidden; border-top: 1px solid blue; margin-top: 6px; margin-left: 5px; } div.content div{ width: 185px; height: 150px; border-top: none; display: none; } </style> </head> <body> <div class="wrap"> <div class="tab"> <div>標題1</div> <div>標題2</div> <div>標題3</div> </div> <divclass="content"> <div>內容1</div> <div>內容2</div> <div>內容3</div> </div> </div> <script type="text/javascript"> var tab=document.getElementsByClassName(‘tab‘)[0]; var tabs=tab.getElementsByTagName(‘div‘); var content=document.getElementsByClassName(‘content‘)[0]; var contents=content.getElementsByTagName(‘div‘); console.log(contents); for (var i = 0; i < tabs.length; i++) { ;(function (j){ tabs[i].onmouseout=function(){ for (var i = 0; i < contents.length; i++) { contents[i].style.display=‘none‘; } tabs[j].style.borderBottom=‘none‘; tabs[j].style.borderTop=‘none‘; tabs[j].style.borderLeft=‘none‘; tabs[j].style.borderRight=‘none‘; tabs[j].style.borderTopLeftRadius=‘0‘; tabs[j].style.borderTopRightRadius=‘0‘; }})(i); ;(function (j){ tabs[i].onmouseover=function(){ for (var i = 0; i < contents.length; i++) { contents[i].style.display=‘none‘; } contents[j].style.display=‘block‘; tabs[j].style.borderBottom=‘2px solid white‘; tabs[j].style.borderTop=‘1px solid blue‘; tabs[j].style.borderLeft=‘1px solid blue‘; tabs[j].style.borderRight=‘1px solid blue‘; tabs[j].style.borderTopLeftRadius=‘4px‘; tabs[j].style.borderTopRightRadius=‘4px‘; }})(i); } </script> </body> </html>
JavaScript之Tab標簽（原始版）