我的前端DEMO
阿新 • • 發佈：2018-11-13
一、tab頁切換效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } ul li{ float: left; width:80px; height:40px; list-style: none; text-align: center; line-height: 40px; cursor: pointer; } #header{ overflow: hidden; } #box{ margin-left: 50px; width: 400px; height:600px; } #body{ width:400px; height: 500px; position:absolute; } #body div{ position:absolute; width: 100%; height: 100%; } #tab1,#content01{ background-color: red; z-index: 1; } #tab2,#content02{ background-color: blue; } #tab3,#content03{ background-color: yellow; } </style> <script src="../jquery/jquery.js"></script> <script> $(function(){ $("li").click(function(){ var index=$(this).index()+1 $("#content0"+index).attr("style","z-index:1").siblings().removeAttr("style"); }) }) </script> </head> <body> <div id="box"> <div id="header"> <ul> <li id="tab1">tab1</li> <li id="tab2">tab2</li> <li id="tab3">tab3</li> </ul> </div> <div id="body"> <div id="content01">內容1</div> <div id="content02">內容2</div> <div id="content03">內容3</div> </div> </div> </body> </html>