jquery实现tab菜单

作者:林炜贤来源:www.163css.com发表时间:(2011-06-21)

这是我在搜狐电器栏目上看到的一个tab菜单,说到tab菜单,最经典当然是网易了,不知多少人去模仿它。我当年初学css时,对于网易的tab菜单觉得非常神奇,当时网易的tab是圆形的,我一直想不懂怎么做,当我懂的时候网易将它做成现在的方形了。

function setTab(name,cursel,n)这个脚本我都不知用了多少次了,几乎每个大型的项目都存在tab 菜单。当然了,我在163css也用了大量的tab,tab菜单最大的好处在于美观的同时又能包含很多信息。这对于大型门户网站是非常适用的。

传统的tab菜单,可以实现鼠标划过切换及点击切换,在jquery的年代,我们讲究不唐突。搜狐的tab切换,鼠标划过后会有渐变的效果,这当然是jquery的功力了。这种切换似乎让人感觉更舒服。

最主要是,搜狐采用了以下方法获取tab:

var rrE = jq("#turnE");changeTab(rrE.find(".menuA li"), rrE.find(".turn"));

这意味着你可以建立无数个tab,而只要在脚本里加上id名就可以了,真是省力啊。。。

以下是我制作的效果截图:

搜狐的电视还算漂亮,值得一提的是在代码里我们可以看到opacity,了解CSS的人都知道这个是透明用的,一定要加上哦。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/201106/jqtab/index.html

下载地址:jquery实现tab菜单(1).rar

返回作者主页:www.163css.com阅读 (10608)
更多 1