前端jquery學習--03
阿新 • • 發佈：2018-11-29
1、tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .item{ width: 300px; background-color: #2459a2; height:38px; line-height: 38px; } .menu{ float:left; border-right:1px solid blue; padding:0 10px; color: white; cursor: pointer; } .hide{ display: none; } .active{ background-color: blue; }</style> </head> <body> <div class="item"> <div class="menu active">選單一</div> <div class="menu">選單二</div> <div class="menu">選單三</div> </div> <div class="content"> <div class="info">內容一</div> <div class="info hide">內容二</div> <div class="info hide">內容三</div> </div> <script src="jquery.js"></script> <script> $(".menu").click(function(){ var i = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $(".info").eq(i).show().siblings().hide(); }); </script> </body> </html>