伟景博客 » Tab http://pengfubing.com 专注于膜技术，水处理，节能减排，循环经济，Wordpress，留学生活等 Mon, 12 Jul 2010 23:21:43 +0000 en hourly 1 http://wordpress.org/?v=3.0 用 jQuery 实现灵活的 tab 切换效果zz http://pengfubing.com/content/wordpress/jquery-tab-zz.html http://pengfubing.com/content/wordpress/jquery-tab-zz.html#comments Fri, 08 Jan 2010 06:56:57 +0000 Welkin http://pengfubing.com/?p=458 原文链接：http://www.xiaorsz.com/jquery-realize-tab-switch-effect/

Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。

寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！

效果预览

tab 效果

实例见文章的结尾处相关文章的部分。

实现思路

大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少 必要！！

具体代码

这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。

首先看 HTML

<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>

看下其实挺简单，一个 P 里三个 span ，然后对应三个 ul 列表，只需要对应的 span 的 ID 和 ul 的 class 一致就可以了。至于 ul 中的内容，就因人而异了！！

我这里是用了两个插件：WordPress Related Posts 和 WP-PostViews Plus 来调用相关文章和热门文章的。于是，我是代码是这样的：

<div class=”entry-foot”>
<p>
<span id=”related_post”>相关文章</span>
<span id=”mhot”>本月热门</span>
<span id=”allhot”>点击排行</span></p>
<?php wp23_related_posts();?>
<ul class=”mhot”><?php get_timespan_most_viewed(‘post’, 5, 30, true, true, 0)?></ul>
<ul class=”allhot”><?php get_most_viewed(‘post’, 5, 30, true, true, 0)?></ul>
</div>

CSS代码

.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;}

样式大家可以自己去设置，其中 .current 的样式就是鼠标移主去时 span 的样式了！

jQuery 代码

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

完了，怎么样，应该挺容易理解的吧！本文只是提供一个思路或是方法，具体的代码大家可以根据自己的实际情况来写。有问题请留言，我会尽量答复。

相关文章

]]> http://pengfubing.com/content/wordpress/jquery-tab-zz.html/feed 6 jQuery实现Tab切换效果 http://pengfubing.com/content/wordpress/jquery-tab.html http://pengfubing.com/content/wordpress/jquery-tab.html#comments Fri, 08 Jan 2010 06:54:57 +0000 Welkin http://pengfubing.com/?p=454

原文链接：http://immmmm.com/add-jquery-tab-switch-effect.html

啥是“Tab 切换效果”，这都不知道那肯定落伍了！其实实现这个有很多方法，随手一搜就是一大把。不过，既然已经加载了jQuery，那就物尽其用，参考了这篇文章《用 jQuery 实现灵活的 tab 切换效果》。

老规矩，三块代码放了先：

<div id="sidebar-tab">
	<div id="tab-title">
		<h3><span id="tab-1" class="current">最新评论</span><span id="tab-2">近期热评</span><span id="tab-3">随机文章</span></h3>
	</div> /* Tab的标题，采用span标签，分别加上了id，并给第一个加上class="current" */
	<div id="tab-content">
		<ul class="tab-1"><?php wkc_recent_comments('number=10&length=25'); ?></ul>
		<ul class="tab-2"><?php wkc_most_commented_posts('number=10&days=300'); ?></ul>
		<ul class="tab-3"><?php wkc_random_posts('number=10&length=40'); ?></ul>
	</div> /* Tab的内容，分别加上了与标题对应的class；其中tab-content ul内的函数是调用WP Kit cn插件的 */
</div>
#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}
#tab-title .current{color:#356aa0;border-bottom:0px;padding:5px 14px;} /* 当前选中标题时的样式 */
#tab-title h3{color:#666;font-size:15px;font-weight:400;}
#tab-1,#tab-2,#tab-3{padding:5px 7px;border-bottom:1px solid #ccf;cursor:pointer;}
#tab-2{border:1px solid #ccf;border-top:none;}
.tab-2,.tab-3{display:none;} /* 这句是用让class=“tab-2”“tab-3”的先隐藏，用CSS控制的好处是没有延迟；如果用jQuery控制会出现只有当页面全部加载完后，tab-2tab-3中的内容才隐藏 */
#tab-content ul{padding:5px 10px;overflow:hidden;}
#tab-content ul li{padding-top:5px;height:20px;}
$('#tab-title span').mouseover(function(){ //鼠标移至id="tab-title"下的span标签时，触发
	$(this).addClass("current").siblings().removeClass(); //给当前的添加class="current"，并且让其同辈元素（即其余#tab-title span）移除class="current"；
	$("."+$(this).attr("id")).show().siblings().hide(); //让class="鼠标移至的span的id"（即tab-content中对应ul中的内容）显示，并且让其同辈元素（即#tab-content ul）隐藏；
});

OK，代码就这些，使用前提是加载了jQuery。这次折腾是html、css、jQuery代码三管齐下，才做出来这么一个东东，效果还行！

相关文章

]]> http://pengfubing.com/content/wordpress/jquery-tab.html/feed 1