<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基于JQuery1.4 Tab选项卡 一行代码轻松搞定</title> <style> .active{color:#F00} </style> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery","1.4.1"); google.setOnLoadCallback( function(){ $(function(){ $("div b:first").addClass("active"); $("div p:gt(0)").hide(); $("div b").click(function(){ $(this).addClass("active").siblings("b").removeClass(); $("div p:eq("+$(this).index()+")").show().siblings("p").hide(); }); }); }); </script> </head> <body> <div> <b>标题1</b> <b>标题2</b> <b>标题3</b> <p> <a href="http://www.taono.cn">淘宝导购站</a> </p> <p> <a href="http://www.shinubi.net">史努比中文网</a> </p> <p> <a href="http://www.pjzone.cn">中文酷博聚合</a> </p> </div> IE用户可能有必要<button onclick="window.location.reload()">点此刷新查看效果</button>。 </body> </html>
摘自:http://www.jgpy.cn/blog/front-end/easily_tab_with_jquery_14.htm