转：jquery实现tab切换效果及js css ajax推荐

今天本来想在Wordpress插件库里面找个Tab切换插件，将最新日志、随机日志、热门排行文章、月排行文章以及最新评论/回复等模块写在一个div里，然后点击Tab切换显示各个选项卡标签，这样不占页面空间。

同时还想将各个Tab选项卡标签里的HTML代码自动生成到一个js文件中去，然后在单独文章页面上(single.php)只需调用这个js文件。这样有一个好处就是可以大大提高单独文章页面的内容相关性，月光博客开发过类似的Z-blog插件，同时月光自己也在用，很可惜在WordPress 中找了半天找不到类似的插件。

要实现Tab选项卡切换效果不用Wordpress 专用插件也很方便。因为远方博客的Wordpress主题一直都有在使用jQuery框架，所以下面首先推荐如何用流行的jQuery实现Tab切换效果；另外也推荐几个使用js+CSS实现Tab选项卡标签切换效果的javascript代码和控件，以及使用纯CSS或Unobtrusive JavaScript 切换显示或隐藏某个标签/选项卡的代码。



#1 jQuery UI tabs

jQuery UI 是 jQuery UI project 的一部分，它在jQuery 库的基础上，为实现更好的Web 交互应用建立了一套用户界面库(User Interface Library for jQuery)。这里的Tab选项卡菜单可以实现非常酷的切换效果，比如圆角、淡入淡出、自动轮换等等：jQuery UI tabs 演示。唯一不好的是必须下载jQery UI 包，如果小型博客网站只是为了实现tab切换一个效果，好像有点小题大作哦。使用jQuery UI 实现Tab切换效果的代码和用法请看这个文档的详细介绍。

#2 jQery tab slider

这是另外一款由Niall Doherty设计的 jQuery 插件，设计界面简洁。最新开发更新的Coda-Slider 2.0版本有多种tab切换效果可供选择，如自动轮播、点击外部链接实现切换、设置默认加载的tab选项卡导航、调整切换速度和淡入淡出的样式等等。下载Coda Slider 2.0。



#3 Yet (E)Another JavaScript Tab Interface Implementation

Yetii是用面向对象的js代码来实现tab切换效果，非常轻便，可以设置默认起始页，设置切换到某个Tab选项卡时执行某个函数、自动轮换效果等等。同时它不依赖于jQuery框架。了解详情。

#4 Floating window with tabs

这个由Javascript 和CSS 文件共同实现的Tab 切换效果，这个tab选项卡不仅可以点击切换，而且这个窗口还是可以拖动/拖曳的。同时设置了窗口最大化、最小化按钮、关闭按钮。赶快去作者页面上查看详细吧：floating_window_with_tabs。如果不想下载插件的朋友，直接使用js+css也可以用很简答的代码实现tab(选项卡/标签/菜单)切换。可以参考下面的HTML+CSS+JS代码。

html代码：

<ul class=”nav”>
<li><a name=”navi” rel=”navi1″  onmouseover=”return changeTab(this);” class=”selected”>js</a></li>
<li><a name=”navi” rel=”navi2″ onmouseover=”return changeTab(this);”>html</a></li>
<li><a name=”navi” rel=”navi3″ onmouseover=”return changeTab(this);”>css</a></li>
</ul>
<div class=”cont” id=”navi1″>1. JS和CSS实现Tab标签切换效果http://farlee.info/</div>
<div class=”cont” id=”navi2″ style=”display:none;”>2. javascript+CSS代码实现Tab选项卡切换效果</div>
<div class=”cont” id=”navi3″ style=”display:none;”>3. JS+CSS实现Tab切换效果</div>

css代码：

ul.nav {height: 20px;}
ul.nav li {float: left;}
ul.nav li a {display: block; width:100px;}
ul.nav li a:hover,ul.nav li a.selected {color: #660000; cursor:pointer}
.cont {width: 235px;}

javascript代码：

function changeTab(oA){
var oAName = oA.getAttribute(“name”);
var oAs = document.getElementsByName(oAName);
for(var i=0; i < oAs.length; i++){
if(oAs[i].className==”selected” && oAs[i] != oA){
oAs[i].className=”";
var oDiv = document.getElementById(oAs[i].getAttribute(“rel”));
oDiv.style.display=”none”;}
}
oA.className=”selected”;
document.getElementById(oA.getAttribute(“rel”)).style.display=”";
return false;
}

同样还有很多JS+CSS的经典javascript代码，如Simple Javascript Accordions，整个JS文件只有1.1k，可以实现多种样式的tab切换效果(标签选项卡切换手风琴效果)。



#5 CSS Tab 导航菜单

CSS Tab 2.0 是完全由CSS设置的Tab导航菜单。点击每个Tab按钮，切换到不同的页面。不过这是用在导航菜单上的，会打开一个新页面，不适用于放在Wordpress 的sidebar边栏等地方。如果需要不打开新页面完全用CSS实现Tab切换效果，可以参考下面的HTML 和CSS代码：

CSS样式：

<style>
<!--
*{margin:0;padding:0;list-style:none;font-size:12px;}
#content{width:300px;margin:10px auto;position:relative;border:1px solid #666;}
ul{width:20px;height:100px;position:absolute;right:5px;top:100px;}
ul li{height:33px;}
ul li a{display:block;width:20px;height:20px;line-height:20px;text-align:center;color:#000;background:#ccc;text-decoration:none;}
ul li a:hover{color:#fff;background:#666;}
#tabTxt{height:300px;overflow:hidden;}
#a1,#a2,#a3{width:300px;height:300px;}
-->
</style>

HTML代码：

<div id="content">
<ul>
<li><a href="#a1">完全CSS实现Tab切换效果http://farlee.info/ 1</a></li>
<li><a href="#a2">完全CSS实现Tab切换效果http://farlee.info/ 2</a></li>
<li><a href="#a3">完全CSS实现Tab切换效果http://farlee.info/ 3</a></li>
</ul>
<div id="tabTxt">
<div id="a1" style="background:#f00">
</div>

<div id="a2" style="background:#080">
</div>
<div id="a3" style="background:#009;">
</div>
</div>
</div>

#6 DomTabs

最后介绍的DOMTab也是用于切换显示或隐藏某个标签/选项卡的javascript 控件。值得一提的是DOMTab使用了“Unobtrusive JavaScript”JS脚本；所谓Unobtrusive JavaScript，根据Wikipedia的解释即将网页结构内容和表现相分离、存在很好的浏览器兼容性和可扩展性的javascript代码，这也是为什么它取名叫DOMTab的原因了。有兴趣的朋友去围观吧：DOMTab。

原文：http://farlee.info/archives/jquery-tab-swap-js-css-ajax-javascript-wordpress.html