详情
鼠标经过切换选项卡效果，一种基于jq实现的选项卡切换效果。
引入jq
<script type="text/javascript" src="jquery.min.js"></script>
css样式
<style type="text/css">
.zimeiti_center_item1{ display:block; margin: 30px auto;height: 400px;border: 1px solid #333;width:645px;}
.zimeiti_center{ display:block; }
.zimeiti_center_title{ display:block; padding:5px; padding-left:0px;}
.zimeiti_center_title span{ display:block; float:left; padding:6px 15px;}
.zimeiti_center_title span a{ display:block; padding:5px; font-size:16px;}
.zimeiti_center_title span a:hover{background:#01A998; color:#FFFFFF;}
.zimeiti_center_title span.select a{background:#01A998; color:#FFFFFF;}
.clearfix{clear: both;}
.zimeiti_center_list{display:none; padding:5px 0px;height: 300px;width: 100%;text-align: center;line-height: 300px;font-size: 60px;color: #fff;}
</style>
div
<div class="zimeiti_center_item1">
<div class="zimeiti_center_title clearfix">
<div id="tab-hd">
<span><a href="#">1</a></span>
<span><a href="#">2</a></span>
<span><a href="#">3</a></span>
<span><a href="#">4</a></span>
</div>
</div>
<div class="clearfix"></div>
<div id="tab-bd">
<div class="zimeiti_center_list" style="background-color: #0ff;">1</div>
<div class="zimeiti_center_list" style="background-color: #ff0;">2</div>
<div class="zimeiti_center_list" style="background-color: #f0f;">3</div>
<div class="zimeiti_center_list" style="background-color: #00f;">4</div>
</div>
</div>
js控制
<script type="text/javascript">
$(function(){
function tabs(tabTit,on,tabCon){
$(tabCon).each(function(){
$(this).children().eq(0).show();
});
$(tabTit).each(function(){
$(this).children().eq(0).addClass(on);
});
$(tabTit).children().hover(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
}
tabs("#tab-hd"," select","#tab-bd");
});
</script>
模板社为广大DeDeCMS爱好者和使用者提供DeDeCMS织梦模板、织梦模板下载、DeDeCMS技巧教程、DeDeCMS插件、banner焦点图特效、图片特效、客服侧边栏代码、导航特效、常用软件下载、TAB选项卡特效等素材资源分享下载。
