利用jquery制作简单的tab效果 tab.html <html> <head> <title>card</title> <link rel="stylesheet" type="text/css" href="tab.css" /> <script src="jquery-1.4.2.min.js"></script> <script src="tab.js"></script> </head> <body> <div id="container"> <div id="menu"> <h3 class="selected"><a href="#" hidefocus="true">No.1</a></h3> <h3><a href="#" hidefocus="true">No.2</a></h3> <h3><a href="#" hidefocus="true">No.3</a></h3> </div> <div id="content"> xxx </div> </div> </body> </html> tab.css * { margin: 0; padding: 0; } #container { width: 500px; margin: 300px; } #menu h3 { background-color: #DDD; float: left; margin-right: 2px; width: 80px; height: 25px; text-align: center; line-height: 25px; } #content { background-color: #AAA; height:175px; width: 300px; } a { color:#FFF; font-size: 12px; text-decoration: none; } #menu .selected { border: 1px solid #AAA; background-color: #AAA; } tab.js( jquery1.4 ) $(function() { $("#menu h3").click(function() { $(this).addClass("selected") .siblings() .removeClass("selected"); }); });