本周前端的页面要上交,再加上电压的问题,导致好几天没更新博客了。今天也分享下最近的小收获,相信做页面的朋友一定会遇到TAB选项卡的,所以就分享两段简单的TAB选项卡代码,一段是JavaScript,一段是jQuery。
为什么我会分享这两段代码?因为共同的优点就是如果页面上有多个TAB选项卡,可以共用这一段代码来完成,是不是很方便呢?我写的小说网站,有个页面上有十几个TAB选项卡,找了很多方法,就是搞不定,因为我老想着id都一样,如果用class的话,document.getElementsById又调不到。最后才知道原来是需要通过传参数的方法来解决,真是经验之谈啊!不过我做的是图片选项卡,对于有CSS基础的朋友,也可以直接用CSS写一个选项卡应该没问题,对于有作图的朋友,照着我的样子再做两张图片也是很简单的。这个是JavaScript的示例:JS_DEMO
因为最近也学了点jQuery的知识,JavaScript可以实现的,jQuery也一定能实现。所以又找了jQuery代码来试着写TAB选项卡。jQuery的优点就是代码简单,几句话就把显示和隐藏搞定!这个是jQuery的示例:JQ_DEMO
两个例子的HTML和CSS配合自己的网站DIY,JavaScript代码和jQuery代码都可以不动。每个DEMO里面都有两个TAB选项卡,其实你可以放一百个TAB选项卡都不成问题哦!
最后是下载地址,里面有完整的代码和图片:点我下载