jQuery之Tab切换
Tab切换
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab切换</title> <style type="text/css"> * { margin: 0; padding: 0; } #tab li { float: left; list-style: none; width: 80px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } #container { position: relative; } #content1, #content2, #content3 { width: 300px; height: 100px; padding: 30px; position: absolute; top: 40px; left: 0; } #tab1, #content1 { background-color: #ffcc00; } #tab2, #content2 { background-color: #ff00cc; } #tab3, #content3 { background-color: #00ccff; } </style> </head> <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1">10元套餐</li> <li id="tab2" value="2">30元套餐</li> <li id="tab3" value="3">50元包月</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> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function (){ var index = 0; var $contents = $('#container>div'); $("#tab>li").click(function () { var clickIndex = $(this).index(); if (clickIndex != index) { $contents[index].style.display = 'none'; $contents[clickIndex].style.display = 'block'; index = clickIndex; } }) }); </script> </body> </html>
