jQuery之Tab切換
阿新 • • 發佈：2020-07-13
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>