WordPress主题的jQuery应用之TAB切换效果

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件,在header.php的head标签中加载,JS文件中加入下例代码:

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".entry-foot span:first").addClass("current");  // 为第一个span添加 .current 的样式,默认选中
$(".entry-foot ul:not(:first)").hide();  //ul 不是第一个时隐藏
$(".entry-foot span").mouseover(function(){  // 鼠标移到 span 上时触发函数
$(".entry-foot span").removeClass("current");  //为第一个 span 移除 .current 样式
$(this).addClass("current");  //为触发的 span 添加样式
$(".entry-foot ul").hide();  // 隐藏 ul
$("."+$(this).attr("id")).fadeIn("slow");  // 这句是核心,class(.) 和触发 span 的ID 一致的 fadeIn(渐显)
});});

HTML代码如下:

1
2
3
4
5
6
7
8
9
<div class="tab">
<p>
<span ID="tab1">tab1</span>
<span ID="tab2">tab2</span>
<span ID="tab3">tab3</span></p>
<ul class="tab1">以 LI 形式呈现的 tab1 的内容</ul>
<ul class="tab2">以 LI 形式呈现的 tab2 的内容</ul>
<ul class="tab3">以 LI 形式呈现的 tab3 的内容</ul>
</div>

添加CSS代码如下:

1
2
3
4
5
6
7
.entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;}
.entry-foot p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;}
.entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.entry-foot .mhot,.entry-foot.allhot{display:none;}

原文:http://www.xiaorsz.com/jquery-realize-tab-switch-effect/

WordPress主题的jQuery应用之TAB切换效果》上有 9 条评论

  1. 很久不来了。虽然大哥的文章很艰涩,但还是为新主题留一下言吧~

发表评论

电子邮件地址不会被公开。 必填项已用*标注