<html><head lang="en">

    <meta charset="UTF-8">

    <title>Tab选项卡</title>

    <link href="css/index.css" rel="stylesheet">

    <script src="js/index.js" type="text/javascript"></script>

</head>

<body>

   <div id="tab" class="tab">

       <div id="tab-head" class="tab-head">

           <ul>

               <li class="" id=""><a href="#">公告</a></li>

               <li id="" class=""><a href="#">规则</a></li>

               <li id="" class=""><a href="#">论坛</a></li>

               <li id="" class=""><a href="#">安全</a></li>

               <li id="" class="select"><a href="#">公益</a></li>

           </ul>

       </div>

       <div id="nav-con" class="nav-con">

           <div class="mod" style="display: none;">

               <ul>

                   <li>

                       <a href="#">数据七夕:金牛爱送玫瑰</a>

                   </li>

                   <li>

                       <a href="#">阿里打造"互联网监管"</a>

                   </li>

                   <li>

                       <a href="#">10万家店60万新品</a>

                   </li>

                   <li>

                       <a href="#">全球最大网上时装周</a>

                   </li>

               </ul>

           </div>

           <div class="mod" style="display: none;">

               <ul>

                   <li>

                       <a href="#">“全额返现”要管控啦</a>

                   </li>

                   <li>

                       <a href="#">淘宝新规发布汇总(7月)</a>

                   </li>

                   <li>

                       <a href="#">炒信规则调整意见反馈</a>

                   </li>

                   <li>

                       <a href="#">质量相关规则近期变更</a>

                   </li>

               </ul>

           </div>

           <div class="mod" style="display: none;">

               <ul>

                   <li>

                       <a href="#">阿里建商家全链路服务</a>

                   </li>

                   <li>

                       <a href="#">个性化的消费时代来临</a>

                   </li>

                   <li>

                       <a href="#">跨境贸易是中小企业机</a>

                   </li>

                   <li>

                       <a href="#">美妆行业虚假信息管控</a>

                   </li>

               </ul>

           </div>

           <div class="mod" style="display: none;">

               <ul>

                   <li>

                       <a href="#">接次文件，毁了一家店</a>

                   </li>

                   <li>

                       <a href="#">账号安全神器阿里钱盾</a>

                   </li>

                   <li>

                       <a href="#">新版阿里110上线了</a>

                   </li>

                   <li>

                       <a href="#">卖家学违禁避免被处罚</a>

                   </li>

               </ul>

           </div>

           <div class="mod" style="display: block;">

               <ul>

                   <li>

                       <a href="#">为了公益high起来</a>

                   </li>

                   <li>

                       <a href="#">魔豆妈妈在线申请</a>

                   </li>

               </ul>

           </div>

       </div>

   </div>

</body></html>
//function $(id){

//    return typeof  id === 'string' ? document.getElementById(id) : id;

//}

//

//window.onload = function(){

//   // 获取鼠标滑过的标签

//   var titles = $('tab-head').getElementsByTagName('li');

//   var divs = $('nav-con').getElementsByTagName('div');

//   if (titles.length != divs.length) return;

//   // 遍历titles下所有的li

//    for(var i = 0; i < titles.length; i++){

//       titles[i].id = i;

//       titles[i].onclick = function(){

//          for(var j=0; j<titles.length; j++){

//              titles[j].className = '';

//              divs[j].style.display = 'none';

//          }

//           this.className = 'select';

//           divs[this.id].style.display = 'block';

////           alert(this.id);

//       }

//    }

//

//}

function $(id){

    return typeof id === 'string' ? document.getElementById(id) : id;

}

window.onload = function(){

   // 获取所有的li(标题) 和 标题对应的内容(div)

    var titles = $('tab-head').getElementsByTagName('li');

    var divs = $('nav-con').getElementsByTagName('div');

   //    判断

    if (titles.length != divs.length) return;

    for(var i = ; i < titles.length; i++){

       titles[i].id = i;

       titles[i].onmouseover = function(){

         for(var j=; j <titles.length; j++){

             titles[j].className = '';

             divs[j].style.display = 'none';

         }

          this.className = 'select';

          divs[this.id].style.display = 'block';

       }

    }

}

js 选项卡的更多相关文章

  1. js 选项卡制作

    知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  3. js 选项卡实现

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  4. 原生JS 选项卡代码实现

    可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...

  5. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  6. js选项卡

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  8. 原生js选项卡

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 选项卡封装

    function tab(input,div){ for(var i = 0; i < input.length; i++){ input[i].index = i; input[i].oncl ...

随机推荐

  1. CentOS7 PostgreSQL 安装

    PostgreSQL安装 安装使用yum安装 (找源 http://yum.postgresql.org/) yum install https://download.postgresql.org/p ...

  2. spice up your desktop

    https://wiki.gnome.org/Projects/GnomeShell/CheatSheet windows10用了一段时间,回来看着gnome3-shell是那么的恶心,翻来翻去重新整 ...

  3. Mycat 依赖包解读

    1.curator - zookeeper开源客户端框架 2.dom4j - xml解析包 3.druid - 阿里巴巴推出的国产数据库连接池,同时具备监控功能,性能优于JDBC和C3P0 4.ehc ...

  4. Log4j 简介及初步应用

    使用2.5版本有问题,暂时没有解决,也许是JDK版本不兼容的原因.因此使用的是log4j-1.2.8.jar 1.三个组件 日志记录器  ——  Logger.输出目的地 —— Appender.输出 ...

  5. 【贪心】 poj 1032 和为n的若干数最大乘积

    给出n,把n分解为若干不相同数之和,使之乘积最大.贪心,Discuss里面的思路:把n分解为从2开始的连续整数,如果有多,则从高位开始依次加1.如26,我们得到2+3+4+5+6,此时还剩余6(26- ...

  6. NoSql的产生

    主流的关系型数据库:Microsoft SQLServer, IBM DB2, Oracle, MySQL, Microsoft Access, Sybase,IBM Informix 随着互联网we ...

  7. Hibernate 系列教程3-单表操作

    工程截图 hibernate.cfg.xml <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Conf ...

  8. HDU 1698 <线段树，区间set>

    题目连接 题意: 一条长为N的铜链子,每个结点的价值为1.有两种修改,l,r,z; z=2:表示把[l,r]区间内链子改为银质,价值为2. z=3:表示把[l,r]区间内链子改为金质,价值为3. 思路 ...

  9. 构建一个最简单的web应用并部署及启动

    第一种构建方式:不使用maven File-new-Dynamic Web Project,用这种方式构建的web项目是在web.xml文件中配置了welcome-file的,但是却没有对应的文件,所 ...

  10. linux下环境变量PS1设置

    PS1变量中提示符各项含义:   \d :代表日期,格式为weekday month date,例如:Wed Dec 12 \H :完整的主机名称.例如:hostname是debian.linux \ ...