<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text-align: center; } ul{ list-style: none; } a{ text-decoration: none; color: #ff6666; font-family: Arial; } .tab-container{ width: 398px; height: 200px; border:1px #ffcccc solid; margin: 0 auto; position: relative; overflow: hidden; } /*tab-head begin*/ .tab-head{ width: 400px; height:30px; left:0; background: #ffcccc; position: absolute; left:-1px;//这里设置-1是为了li的border与最外层的border重合 } .tab-head li{ float:left; height: 29px; line-height: 29px; width: 78px; overflow: hidden; padding: 0 1px; border-bottom: 1px solid #ffcccc; background: #ffeeee; } li.select{ background: #fff; padding: 0; border-left: 1px solid #ffcccc; border-right: 1px solid #ffcccc; border-bottom: 1px solid #fff; } /*tab-head end tab-panel begin*/ .tab-panel{ position: relative; width: 100%; height: 85%; top: 15%; -webkit-transition:all 0.01s linear;//切换过渡效果 } .tab-panel section{ position: absolute; display: inline-block; width: 100%; height: 100%; } #panel-1{ left: 0; } #panel-2{ left: 100%; } #panel-3{ left: 200%; } #panel-4{ left: 300%; } #panel-5{ left: 400%; } </style> </head> <body> <div> <ul> <li onmousedown="$(this)"><a href="#" >Tab1</a></li> <li onmousedown="$(this)"><a href="#" >Tab2</a></li> <li onmousedown="$(this)"><a href="#" >Tab3</a></li> <li onmousedown="$(this)"><a href="#" >Tab4</a></li> <li onmousedown="$(this)"><a href="#" >Tab5</a></li> </ul> <div> <section><p>这是panel-1</p></section> <section><p>这是panel-2</p></section> <section><p>这是panel-3</p></section> <section><p>这是panel-4</p></section> <section><p>这是panel-5</p></section> </div> </div> <script type="text/javascript"> function $(id){ var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute('class',''); }; id.setAttribute('class','select'); var ele = document.getElementById('tab-panel'); ele.style.left=-(id.id-1)+'00%'; } </script> </body> </html>
效果图：
