最原始的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> <div class="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>