多tab點擊切換
阿新 • • 發佈：2018-07-27
之間 pan none text 分享 absolut 圖片 style com
現在來一個小練習，就是用js實現多tab之間的切換：
<body> <ul id="tab"> <li id="tab1">10元套餐</li> <li id="tab2">20元套餐</li> <li id="tab3">30元套餐</li> </ul> <div id="container"> <div id="content1">10元套餐詳情：<br/> 每月套餐內撥打100分鐘，超出部分2毛/分鐘 </div> <div id="content2" style="display: none"> 30元套餐詳情：<br/> 每月套餐內撥打300分鐘，超出部分1.5毛/分鐘 </div> <div id="content3" style="display: none"> 50元包月詳情：<br/> 每月無限量隨心打 </div> </div> </body>
對應的css格式如圖：
<style type="text/css"> * { margin: 0; padding: 0; } #tab>li { float: left; list-style: none; width: 80px; height: 40px; text-align: center; line-height: 40px; cursor: pointer; border: 1px gray solid; border-collapse: collapse; } #tab>li:nth-child(1) { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #tab>li:nth-last-child(1) { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #content1, #content2, #content3 { width: 300px; height: 100px; padding: 30px; position: absolute; top: 40px; left: 0px; border-radius: 10px; } #tab1, #content1 { background: orangered; } #tab2, #content2 { background: pink; } #tab3, #content3 { background: deeppink; } </style>
效果圖：
js實現的結果：
<script src="../../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { var currentindex = 0; var $contents = $("#container>div"); $("#tab>li").click(function() { $contents[currentindex].style.display = "none"; var index = $(this).index(); $contents[index].style.display = "block"; currentindex = index; }) }) </script>
可以實現正常的切換了。
多tab點擊切換