WEB前端开发学习----12. JavaScript 选项卡效果
2014-08-24 05:43
756 查看
选项卡无处不在,记录一个简单的JS实现方法, 仿网易效果。
当两个边框紧挨时,会变粗, 颜色也会变深,解决办法就是:
margin-left:-1px, 按需修改top,left,right,bottom.
当两个边框紧挨时,会变粗, 颜色也会变深,解决办法就是:
margin-left:-1px, 按需修改top,left,right,bottom.
<!doctype html> <html> <head> <meta charset="utf-8"/> </head> <style type="text/css"> body,div,ul,li,a{margin:0;padding:0;list-style: none;text-decoration: none;font-size: 14px;color:black;} #tagCard{ width:300px; height:300px; margin: 100px; } #title a{ display: block; } #title li{ float: left; width:98px; height:28px; background: #F8F8F8; border-top:2px solid #206F96; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; line-height: 28px; text-align: center; margin-left: -1px; } #title .titleShow{ background: white; border-bottom: none; font-weight: bold; } #content div{ clear:both; display: none; } #content .contentShow{ display: block; } </style> <body> <div id="tagCard"> <div id="title"> <ul> <li class="titleShow" onmouseover="show(0)"><a href="#">视频</a></li> <li onmouseover="show(1)"><a href="#">图片</a></li> <li onmouseover="show(2)"><a href="#">新闻</a></li> </ul> </div> <div id="content"> <div class="contentShow"> <ul> <li>视频 视频 视频 视频 视频 视频</li> <li>视频 视频 视频 视频 视频 视频</li> <li>视频 视频 视频 视频 视频 视频</li> <li>视频 视频 视频 视频 视频 视频</li> <li>视频 视频 视频 视频 视频 视频</li> <li>视频 视频 视频 视频 视频 视频</li> <li>视频 视频 视频 视频 视频 视频</li> </ul> </div> <div> <ul> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> <li>图片 图片 图片 图片 图片 图片</li> </ul> </div> <div> <ul> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> <li>新闻 新闻 新闻 新闻 新闻</li> </ul> </div> </div> </div> <script type="text/javascript"> var tObj=document.getElementById("title").getElementsByTagName("li"); var cObj=document.getElementById("content").getElementsByTagName("div"); function show(num){ for(var i=0;i<tObj.length;i++){ if(i==num){ tObj[num].className="titleShow"; cObj[num].style.display="block"; }else{ tObj[i].className=""; cObj[i].style.display="none"; } } } </script> </body> </html>
相关文章推荐
- WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果
- WEB前端开发学习----7.JavaScript 中 var 的重要性
- Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
- WEB前端开发学习----11. JQuery 实现简单的拖拽效果
- web前端开发学习经验总结
- 网站开发WEB前端高性能优化之JavaScript优化细节
- ios开发学习--选项卡(Tab Bar) 效果源码分享--系列教程
- 转一篇前端开发人员总结的《JavaScript 学习资源推荐》
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- Web开发必备技巧:JavaScript全方位学习
- 做为一名在校学生而言,从其职业发展的角度出发,在学习 Web 前端开发的时候有必要花时间兼容 IE6、IE7 这些浏览器吗?
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 网站开发WEB前端高性能优化之JavaScript优化细节
- ios开发学习--选项卡(Tab Bar) 效果源码分享--系列教程
- 黑马程序员--Java学习笔记之Web开发—JavaScript常用触发事件总结
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- Web前端开发规范文档(css/javascript)
- web开发-前端设计学习日志
- 前端开发学习三——Javascript基础,变量提升(hosting)
- WEB前端开发高性能优化部分之JavaScript的优化细节!