<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <style> ul,li{ margin:0; padding:0; list-style:none; } .container{ width:800px; } #option{ height:38px; line-height:38px; border-bottom:1px solid #999; border-left:1px solid #999; } #option li{ float:left; padding:0 20px; height:37px; border-top:1px solid #999; border-right:1px solid #999; cursor:pointer; background-color:#f5f5f5; } #option li.current{ background-color:#fff; height:38px; } #card li{ height:300px; padding:20px; border:1px solid #999; border-top:none; display:none; } #card li.current{ display:block; } </style> <script src="./jquery-1.8.3.min.js"></script> <script> $(function(){ $("#option li").click(function(){ //alert($(this).index()); $(this).addClass('current').siblings().removeClass('current'); $("#card li").eq($(this).index()).addClass('current').siblings().removeClass('current'); }) }) </script> </head> <body> <h1>jQuery 选项卡</h1> <hr> <div class="container"> <ul id="option"> <li class="current">未付款订单</li> <li>已发货订单</li> <li>待评价订单</li> <li>已失效订单</li> </ul> <ul id="card"> <li class="current">这是 未付款 的订单</li> <li>这是 已发货 的订单</li> <li>这是 待评价 的订单</li> <li>这是 已失效 的订单</li> </ul> </div> </body> </html>