如果你的页面只有一个tab（选项卡）切换的地方，需要调用js效果，如果单独为了它，还要为页面加载一个jQuery插件，想必是极痛苦的。所有很多时候，jQuery特效也不是万能的，偶尔来个原生的js效果也是必须的。今天闲着无聊，用js和jquery分别写了一个选项卡的效果，但是其中用到jquery只是为了更好的获取标签以及修改样式。
先来浏览一下效果图吧~~
一、Javascript实现
1、html布局
<div> <div> <span>新闻</span> <span>图片</span> <span>军事</span> </div> <div> <div> <ul> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> </ul> </div> <div> <ul> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li> </ul> </div> <div> <ul> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li> </ul> </div> </div> </div>
布局很简单，其实就是两个div，第一个div中存放按钮，第二个div中存放内容。
2、css修饰
<style type="text/css"> #box{ height:600px; margin-top: 100px; margin-left: 100px; } #box .biaoti{ font:16px/30px "宋体"; height: 30px; width: 310px; border-top:2px solid #206F96; text-align: center; } #box .biaoti .s1{ width: 102px; height: 29px; border-left: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; float: left; } #box .biaoti .s2{ width: 102px; height: 29px; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; background: url(images/1.jpg) repeat-x; float: left; } #box .biaoti .s3{ width: 102px; height: 29px; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; background: url(images/1.jpg) repeat-x; float: left; } #box .neirong ul{ list-style: none; padding-left: 0px; } #box .neirong ul li{ line-height: 30px; padding-left: 0px; } #box .neirong ul li a:link,#box .neirong ul li a:visited{ text-decoration: none; color:#666; font-size: 16px; } #tupian,#junshi{ display: none; } </style>
3、js效果实现