首页 > 代码库 > WEB前端开发学习----12. JavaScript 选项卡效果

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

2024-08-09 10:09:59   221人阅读

选项卡无处不在，记录一个简单的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.   
  9.     #tagCard{  
  10.         width:300px;  
  11.         height:300px;  
  12.         margin: 100px;  
  13.     }  
  14.     #title a{  
  15.         display: block;  
  16.     }  
  17.     #title li{  
  18.         float: left;  
  19.         width:98px;  
  20.         height:28px;  
  21.         background: #F8F8F8;  
  22.         border-top:2px solid #206F96;  
  23.         border-right: 1px solid #CCC;  
  24.         border-left: 1px solid #CCC;  
  25.         border-bottom: 1px solid #CCC;  
  26.         line-height: 28px;  
  27.         text-align: center;  
  28.         margin-left: -1px;  
  29.     }  
  30.     #title .titleShow{  
  31.         background: white;  
  32.         border-bottom: none;  
  33.         font-weight: bold;  
  34.     }  
  35.   
  36.     #content div{  
  37.         clear:both;  
  38.         display: none;  
  39.   
  40.     }  
  41.     #content .contentShow{  
  42.         display: block;  
  43.     }  
  44. </style>  
  45.   
  46. <body>  
  47.     <div id="tagCard">  
  48.         <div id="title">  
  49.             <ul>  
  50.                 <li class="titleShow" onmouseover="show(0)"><a href=http://www.mamicode.com/"#">视频</a></li>  
  51.                 <li onmouseover="show(1)"><a href=http://www.mamicode.com/"#">图片</a></li>  
  52.                 <li onmouseover="show(2)"><a href=http://www.mamicode.com/"#">新闻</a></li>  
  53.             </ul>  
  54.           
  55.         </div>  
  56.         <div id="content">  
  57.             <div class="contentShow">  
  58.                 <ul>  
  59.                     <li>视频 视频 视频 视频 视频 视频</li>  
  60.                     <li>视频 视频 视频 视频 视频 视频</li>  
  61.                     <li>视频 视频 视频 视频 视频 视频</li>  
  62.                     <li>视频 视频 视频 视频 视频 视频</li>  
  63.                     <li>视频 视频 视频 视频 视频 视频</li>  
  64.                     <li>视频 视频 视频 视频 视频 视频</li>  
  65.                     <li>视频 视频 视频 视频 视频 视频</li>  
  66.                       
  67.                 </ul>  
  68.             </div>      
  69.   
  70.             <div>  
  71.                 <ul>  
  72.                     <li>图片 图片 图片 图片 图片 图片</li>  
  73.                     <li>图片 图片 图片 图片 图片 图片</li>  
  74.                     <li>图片 图片 图片 图片 图片 图片</li>  
  75.                     <li>图片 图片 图片 图片 图片 图片</li>  
  76.                     <li>图片 图片 图片 图片 图片 图片</li>  
  77.                     <li>图片 图片 图片 图片 图片 图片</li>  
  78.                     <li>图片 图片 图片 图片 图片 图片</li>  
  79.                     <li>图片 图片 图片 图片 图片 图片</li>  
  80.                   
  81.                 </ul>  
  82.             </div>      
  83.   
  84.             <div>  
  85.                 <ul>  
  86.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  87.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  88.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  89.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  90.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  91.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  92.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  93.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  94.                     <li>新闻 新闻 新闻 新闻 新闻</li>  
  95.                       
  96.                 </ul>  
  97.             </div>  
  98.         </div>  
  99.     </div>  
  100.   
  101. <script type="text/javascript">  
  102.     var tObj=document.getElementById("title").getElementsByTagName("li");  
  103.     var cObj=document.getElementById("content").getElementsByTagName("div");  
  104.   
  105.     function show(num){  
  106.         for(var i=0;i<tObj.length;i++){  
  107.             if(i==num){  
  108.                 tObj[num].className="titleShow";  
  109.                 cObj[num].style.display="block";  
  110.             }else{  
  111.                 tObj[i].className="";  
  112.                 cObj[i].style.display="none";  
  113.             }  
  114.         }  
  115.     }  
  116. </script>  
  117. </body>  
  118. </html>  

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


联系
我们