网页Tab选项卡实现

港控/mmm° 2021-06-10 20:41 658阅读 0赞

转自:慕课网

效果图如下：

20151216175601456

html代码部分:

  1. <!doctype html>
  2. <html lang="'en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tab切换-延迟</title>
  6.     <link type="text/css" rel="stylesheet" href="css/style.css">
  7.     <script type="text/javascript" src="js/script.js"></script>
  8. </head>
  9. <body>
  10.     <div id="notice" class="notice">
  11.         <div id="notice-tit" class="notice-tit">
  12.           <ul>
  13.               <li>
  14.                   <a href="#">公告</a>
  15.               </li>
  16.               <li>
  17.                   <a href="#">规则</a>
  18.               </li>
  19.               <li>
  20.                   <a href="#">论坛</a>
  21.               </li>
  22.               <li>
  23.                   <a href="#">安全</a>
  24.               </li>
  25.               <li class="select">
  26.                   <a href="#">公益</a>
  27.               </li>
  28.           </ul>
  29.         </div>
  30.         <div id="notice-con" class="notice-con">
  31.             <div class="mod" style="display:none">
  32.                 <ul>
  33.                     <li>
  34.                         <a href="#">
  35.                           张勇：要玩快乐足球
  36.                         </a>
  37.                     </li>
  38.                     <li>
  39.                         <a href="#">
  40.                           阿里2000万驰援灾区！
  41.                         </a>
  42.                     </li>
  43.                     <li>
  44.                         <a href="#">
  45.                           旅游宝让你边玩边赚钱
  46.                         </a>
  47.                     </li>
  48.                     <li>
  49.                         <a href="#">
  50.                           多行跟进阿里信用贷款
  51.                         </a>
  52.                     </li>
  53.                 </ul>
  54.             </div>
  55.             <div class="mod" style="display:none">
  56.                 <ul>
  57.                     <li>
  58.                         <span>
  59.                             [
  60.                               <a href="#">通知</a>
  61.                             ]
  62.                         </span>
  63.                         <a href="#">
  64.                           "滥发"即将换新
  65.                         </a>
  66.                     </li>
  67.                     <li>
  68.                         <span>
  69.                             [
  70.                               <a href="#">通知</a>
  71.                             ]
  72.                         </span>
  73.                         <a href="#">
  74.                           比特币严管啦！
  75.                         </a>
  76.                     </li>
  77.                     <li>
  78.                         <span>
  79.                             [
  80.                               <a href="#">通知</a>
  81.                             ]
  82.                         </span>
  83.                         <a href="#">
  84.                           禁发商品名录！
  85.                         </a>
  86.                     </li>
  87.                     <li>
  88.                         <span>
  89.                             [
  90.                               <a href="#">通知</a>
  91.                             ]
  92.                         </span>
  93.                         <a href="#">
  94.                           商品属性限制
  95.                         </a>
  96.                     </li>
  97.                 </ul>
  98.             </div>
  99.             <div class="mod" style="display:none">
  100.                 <ul>
  101.                     <li>
  102.                         <span>
  103.                             [
  104.                               <a href="#">聚焦</a>
  105.                             ]
  106.                         </span>
  107.                         <a href="#">
  108.                           金牌卖家再启航
  109.                         </a>
  110.                     </li>
  111.                     <li>
  112.                         <span>
  113.                             [
  114.                               <a href="#">功能</a>
  115.                             ]
  116.                         </span>
  117.                         <a href="#">
  118.                           橱窗规则升级啦
  119.                         </a>
  120.                     </li>
  121.                     <li>
  122.                         <span>
  123.                             [
  124.                               <a href="#">话题</a>
  125.                             ]
  126.                         </span>
  127.                         <a href="#">
  128.                           又爱又恨优惠劵 
  129.                         </a>
  130.                     </li>
  131.                     <li>
  132.                         <span>
  133.                             [
  134.                               <a href="#">工具</a>
  135.                             ]
  136.                         </span>
  137.                         <a href="#">
  138.                           购后送店铺红
  139.                         </a>
  140.                     </li>
  141.                 </ul>
  142.             </div>
  143.             <div class="mod" style="display:block">
  144.                 <ul>
  145.                     <li>
  146.                         <a href="#">
  147.                           个人重要信息要管牢！
  148.                         </a>
  149.                     </li>
  150.                     <li>
  151.                         <a href="#">
  152.                            卖家防范红包欺诈提醒
  153.                         </a>
  154.                     </li>
  155.                     <li>
  156.                         <a href="#">
  157.                             更换收货地址的陷阱！
  158.                         </a>
  159.                     </li>
  160.                     <li>
  161.                         <a href="#">
  162.                            注意骗子的技术升级了！
  163.                         </a>
  164.                     </li>
  165.                 </ul>
  166.             </div>
  167.             <div class="mod" style="display:none">
  168.                 <ul>
  169.                     <li>
  170.                         <a href="#">
  171.                           走进无声课堂
  172.                         </a>
  173.                     </li>
  174.                     <li>
  175.                         <a href="#">
  176.                            淘宝之行大众评审赢公益金
  177.                         </a>
  178.                     </li>
  179.                     <li>
  180.                         <a href="#">
  181.                             爱心品牌联合征集
  182.                         </a>
  183.                     </li>
  184.                     <li>
  185.                         <a href="#">
  186.                            名公益机构淘宝开店攻略
  187.                         </a>
  188.                     </li>
  189.                 </ul>
  190.             </div>
  191.         </div>
  192.     </div>
  193. </body>
  194. </html>

css代码部分: 

  1. *{margin:0;
  2.   padding:0;
  3.   list-style:none;
  4.   font-size:12px;}
  6. .notice{width:298px;
  7.         height:98px;
  8.         margin:10px;
  9.         border:1px solid #eee;
  10.         overflow:hidden;}
  12. .notice-tit{height:27px;
  13.             position:relative;
  14.             background:#F7F7F7;}
  16. .notice-tit ul{position:absolute;
  17.                width:301px;
  18.                left:-1px;}
  20. .notice-tit li{float:left;
  21.                width:58px;
  22.                height:26px;
  23.                line-height:26px;
  24.                text-align:center;
  25.                overflow:hidden;
  26.                background:#FFF;
  27.                padding:0 1px;
  28.                background:#F7F7F7;
  29.                border-bottom:1px solid #eee;}
  31. .notice-tit li.select{background:#FFF;
  32.                       border-bottom-color:#FFF;
  33.                       border-left:1px solid #eee;
  34.                       border-right:1px solid #eee;
  35.                       padding:0;
  36.                       font-weight:bolder;}
  38. .notice li a:link,.notice li a:visited{text-decoration:none;
  39.                                                color:#000;}
  41. .notice li a:hover{color:#F90;}
  43. .notice-con .mod{margin:10px 6px;}
  45. .notice-con .mod ul li{float:left;
  46.                        width:143px;
  47.                        height:25px;
  48.                        overflow:hidden;}

js代码部分: 

  1. function $(id){
  2.     return typeof id==='string'?document.getElementById(id):id;
  3. }
  5. window.οnlοad=function(){
  6.   // 标签的索引
  7.   var index=0;
  8.   var timer=null;
  10.   var lis=$('notice-tit').getElementsByTagName('li'),
  11.       divs=$('notice-con').getElementsByTagName('div');
  13.   if(lis.length!=divs.length) return;
  15.   // 遍历所有的页签
  16.   for(var i=0;i<lis.length;i++){
  17.     lis[i].id=i;
  18.     lis[i].οnmοuseοver=function(){
  19.       // 用that这个变量来引用当前滑过的li
  20.       var that=this;
  21.       // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
  22.       if(timer){
  23.         clearTimeout(timer);
  24.         timer=null;
  25.       }
  26.       // 延迟半秒执行
  27.       timer=window.setTimeout(function(){
  28.         for(var j=0;j<lis.length;j++){
  29.           lis[j].className='';
  30.           divs[j].style.display='none';
  31.         }
  32.         lis[that.id].className='select';
  33.         divs[that.id].style.display='block';
  34.       },500);
  35.     }
  36.   }
  37. }

下载地址：http://download.csdn.net/download/u014175572/9362033

发表评论

表情：
评论列表 （有 0 条评论，658人围观）

还没有评论，来说两句吧...

相关阅读

    相关 tab选项卡

    tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

    た 入场券た 入场券/ 0 赞/ 555 阅读