<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. WebForm（aspx,cs,dll之间的关系）

    WebForm分为两个文件aspx和aspx.cs,aspx是页面模板,是页面描述文件,就是html的内容,和aspx结合的更好,不用像一开始那样程序员自己去填充模板,控件都是定义在aspx中,内联的 ...

  2. java 静态方法和单例模式的区别

    1.加载时间 首先明白内存问题 Java内存分为:堆内存.栈内存.方法区(静态区和非静态区).本地方法区 无论是静态方法还是非静态方法,在内存中都只有一份分别位于方法区的静态区和非静态区:非静态方法在 ...

  3. OpenGL红宝书第一个例子：绘制两个三角形

    1. 环境配置 在这里不在做环境配置的说明,因为网上可以找到很多类似的教程,如果有需要可以@我,我也希望能帮到大家,其它的不说了,先上我的代码 2. 第一个程序代码 创建LoadShader.h #p ...

  4. VIM继承C语言（转）

    在下面的基础上加上了astyle sh.c --style=kr --indent=spaces --indent-cases --pad-header --pad-oper --unpad-pare ...

  5. aX+bY+cZ=n(非负整数解存在性)

    题意: a*1234567+b*123456+c*1234=n 非负整数解得存在性. 题解: 看代码. #include<iostream> #include<cstdio> ...

  6. spring jdbc 源码

    类:org.springframework.jdbc.core.JdbcTemplate public <T> T execute(PreparedStatementCreator psc ...

  7. 以图搜图(一)：Python实现dHash算法（转）

    近期研究了一下以图搜图这个炫酷的东西.百度和谷歌都有提供以图搜图的功能,有兴趣可以找一下.当然,不是很深入.深入的话,得运用到深度学习这货.Python深度学习当然不在话下. 这个功能最核心的东西就是 ...

  8. 简易控制中心，angular的简单使用

    <html> <head> <meta charset='utf-8'> <script src="js/angular.js">& ...

  9. js框架——angular.js（3）

    1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...

  10. 关于VC中的错误处理

    include <exception> try {} cache(exception &e) { cout<<e.what()<<endl; }     但 ...