基于JQuery1.4 Tab选项卡一行代码轻松搞定

最新推荐文章于 2024-07-15 15:13:08 发布

fanxinhu

最新推荐文章于 2024-07-15 15:13:08 发布

阅读量699

点赞数

文章标签： jquery function div button css

HMTL代码：

<div>
<b>标题1</b> <b>标题2</b> <b>标题3</b>
<p>标题1内容</p>
<p>标题2内容</p>
<p>标题3内容</p>
</div>

下来是必要的CSS代码：

.active{color:#F00}

接着就是关键的JQuery代码了：

$("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();});

当然，根据HMTL代码的不同结构，JS代码可以写得更为简单，因为我有代码洁癖，所以能省的都省了。需要注意的是，如果需要一个页面应用多个TAB选项卡效果，就如同我博客的侧栏（这个使用1.3写的小插件，尚不完善。）的多个应用，可能还需再完善。这里只是给出了一个最简便的思路，就是利用index()！

<html><html>
<head>
<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 οnclick="window.location.reload()">点此刷新查看效果</button>。
</body>
</html>