WEB前端开发学习----12. JavaScript 选项卡效果

选项卡无处不在，记录一个简单的JS实现方法, 仿网易效果。

当两个边框紧挨时，会变粗, 颜色也会变深，解决办法就是：

margin-left:-1px, 按需修改top,left,right,bottom.

[html] view plaincopy

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. </head>
  6. <style type="text/css">
  7. body,div,ul,li,a{margin:0;padding:0;list-style: none;text-decoration: none;font-size: 14px;color:black;}
  8. #tagCard{
  9. width:300px;
  10. height:300px;
  11. margin: 100px;
  12. }
  13. #title a{
  14. display: block;
  15. }
  16. #title li{
  17. float: left;
  18. width:98px;
  19. height:28px;
  20. background: #F8F8F8;
  21. border-top:2px solid #206F96;
  22. border-right: 1px solid #CCC;
  23. border-left: 1px solid #CCC;
  24. border-bottom: 1px solid #CCC;
  25. line-height: 28px;
  26. text-align: center;
  27. margin-left: -1px;
  28. }
  29. #title .titleShow{
  30. background: white;
  31. border-bottom: none;
  32. font-weight: bold;
  33. }
  34. #content div{
  35. clear:both;
  36. display: none;
  37. }
  38. #content .contentShow{
  39. display: block;
  40. }
  41. </style>
  42. <body>
  43. <div id="tagCard">
  44. <div id="title">
  45. <ul>
  46. <li class="titleShow" onmouseover="show(0)"><a href="#">视频</a></li>
  47. <li onmouseover="show(1)"><a href="#">图片</a></li>
  48. <li onmouseover="show(2)"><a href="#">新闻</a></li>
  49. </ul>
  50. </div>
  51. <div id="content">
  52. <div class="contentShow">
  53. <ul>
  54. <li>视频 视频 视频 视频 视频 视频</li>
  55. <li>视频 视频 视频 视频 视频 视频</li>
  56. <li>视频 视频 视频 视频 视频 视频</li>
  57. <li>视频 视频 视频 视频 视频 视频</li>
  58. <li>视频 视频 视频 视频 视频 视频</li>
  59. <li>视频 视频 视频 视频 视频 视频</li>
  60. <li>视频 视频 视频 视频 视频 视频</li>
  61. </ul>
  62. </div>
  63. <div>
  64. <ul>
  65. <li>图片 图片 图片 图片 图片 图片</li>
  66. <li>图片 图片 图片 图片 图片 图片</li>
  67. <li>图片 图片 图片 图片 图片 图片</li>
  68. <li>图片 图片 图片 图片 图片 图片</li>
  69. <li>图片 图片 图片 图片 图片 图片</li>
  70. <li>图片 图片 图片 图片 图片 图片</li>
  71. <li>图片 图片 图片 图片 图片 图片</li>
  72. <li>图片 图片 图片 图片 图片 图片</li>
  73. </ul>
  74. </div>
  75. <div>
  76. <ul>
  77. <li>新闻 新闻 新闻 新闻 新闻</li>
  78. <li>新闻 新闻 新闻 新闻 新闻</li>
  79. <li>新闻 新闻 新闻 新闻 新闻</li>
  80. <li>新闻 新闻 新闻 新闻 新闻</li>
  81. <li>新闻 新闻 新闻 新闻 新闻</li>
  82. <li>新闻 新闻 新闻 新闻 新闻</li>
  83. <li>新闻 新闻 新闻 新闻 新闻</li>
  84. <li>新闻 新闻 新闻 新闻 新闻</li>
  85. <li>新闻 新闻 新闻 新闻 新闻</li>
  86. </ul>
  87. </div>
  88. </div>
  89. </div>
  90. <script type="text/javascript">
  91. var tObj=document.getElementById("title").getElementsByTagName("li");
  92. var cObj=document.getElementById("content").getElementsByTagName("div");
  93. function show(num){
  94. for(var i=0;i<tObj.length;i++){
  95. if(i==num){
  96. tObj[num].className="titleShow";
  97. cObj[num].style.display="block";
  98. }else{
  99. tObj[i].className="";
  100. cObj[i].style.display="none";
  101. }
  102. }
  103. }
  104. </script>
  105. </body>
  106. </html>
时间： 2024-08-09 13:01:11

WEB前端开发学习----12. JavaScript 选项卡效果的相关文章

2018web前端学习路线，详谈web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端,这份web前端开发学习路线分享给你. 好的学习方法和掌握好正确的学习路线可以让我们的学习达到事半功倍的效果,如果你新手想要学习web前端的话,那么这份前端的学习路线图很适合你.这份学习路线的课程涵盖JavaScript.HTML5.C

WEB前端开发学习：源码canvas 雪

WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body style="overflow: hidden;margin:

web前端开发学习路线图分享，详谈2018web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看.挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的

干货教程 | Web前端开发学习入门指南

互联网的高速发展,让企业对于Web前端开发人员的需求越来越大,想要进入这行的人自然也逐渐增多.很多新手在进入这行时都会徘徊.犹豫.疑问,想学习又怕学不好,下面就和Web前端小编一起来看看. 1.HTML的学习 超文本标记语言(HyperTextMark-up Language简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户.因此,我们必须掌握HTML的基本结构和常用标记及属性. HTML的学习是一个记忆和理

Web 前端开发学习之路（入门篇）

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

《JavaScript &amp;amp; jQuery交互式Web前端开发》之JavaScript基础指令

       在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序.     在開始学习后面章节中的更复杂的概念之前,我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序. 语言: 语法结构 不论什么新的语言都一样,都要学习它们的新词汇(词汇表),以及将这些词汇

web前端开发学习课程大纲路线图及学习方法分享

想学好web前端开发,要学会阅读别人优秀的代码.web前端开发思想并不是统一固定不变的,阅读别人代码的过程就是间接的在向别人学习,这一过程中可以学习别人的开发思路,不同的人思路是不一样的,如果别人写的代码很优秀.很简单.且运行和性能上有很大的优势,就有很多可以借鉴的地方. 以下这份web前端学习路线图适合所以零基础的学员学习,都是从浅入深,没有基础的同学跟着视频教程及课程大纲一步一步的学习是可以很好的掌握的. 那么想要学好html5前端开发,那么需要掌握的专业技术有: 第一阶段:前端页面重构 内

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.