标签切换效果

原文地址http://www.sub-273.com/archives/232

JQuery代码

$(document).ready(function(){$(".slide_content:gt(0)").hide(); $(".slideTit li a").click(function(){var aIndex = $("li a").index($(this));$(".slide_content").eq(aIndex).show().siblings().hide();});});   

CSS代码

.slide{width:300px;height:300px;font-family:"微软雅黑";font-size:14px;}.slideTit{width:300px;height:30px;}.slideTit ul{margin:0px;padding:0px;list-style:none outside none;}.slideTit ul li{float:left;width:60px;height:30px;line-height:30px;border:solid 1px #CCC;text-align:center;margin-right:1px;}.slideTit li a{text-decoration:none;color:#333;}.slideTit li a:hover{text-decoration:underline;} .slideArea{width:298px;margin-top:20px;overflow-x:hidden;}.slideArea .slide_content{width:249px;height:200px;border:solid 1px #CCC;position:relative;float:left;}  

html代码

<div class="slide"><div class="slideTit"><ul><li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域1</a></li><li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域2</a></li><li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域3</a></li><li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域4</a></li></ul></div><div class="slideArea"><div class="slide_content">这个区域1..</div><div class="slide_content">这个区域2..</div><div class="slide_content">这个区域3..</div><div class="slide_content">这个区域4..</div><div class="slide_content">这个区域5..</div></div></div>