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

作者 FarLee 2010年4月19日 21:49:01   ‖浏览(38,845)

今天本来想在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 切换显示或隐藏某个标签/选项卡的代码。

jquery ui tabs 实现tab 切换效果

#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

jquery coda slider 插件实现tab 切换效果

#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://h.farll.com/</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切换效果(标签选项卡切换手风琴效果)。

简单 Javascript 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://h.farll.com/ 1</a></li>
<li><a href="#a2">完全CSS实现Tab切换效果http://h.farll.com/ 2</a></li>
<li><a href="#a3">完全CSS实现Tab切换效果http://h.farll.com/ 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

css代码:
<blockquote>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;}</blockquote>

“jquery实现tab切换效果及js css ajax推荐”文章评论(7)

  1. 来过了,注明一下,呵呵。

  2. 这些JS之前都有收藏过,现在不知道埋在哪个文件夹下了》。。

  3. 谢谢分享。 收藏了

  4. 来几个实例的好!!

  5. 有没有写好的,打包直接下载的呢?

  6. 太好了,我要重新做下首页,就在找这样的代码。

  7. 及时雨呀,呵呵

来说兩句