<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. 几种访问其他域swf文件，或本地浏览器运行环境【安全沙箱】冲突解决方法

    声明: 几种方法都源自网络,我只负责汇总一下子,因为来自多方转载,也找不到初始出处了,需要的可以随意收藏,物尽其用,蛮好^_^ 对于类似的出错信息:SecurityError: Error #2148 ...

  2. 树形dp Codeforces Round #364 (Div. 1)B

    http://codeforces.com/problemset/problem/700/B 题目大意:给你一棵树,给你k个树上的点对.找到k/2个点对,使它在树上的距离最远.问,最大距离是多少? 思 ...

  3. docker install for centos7

    CentOS Docker runs on CentOS 7.X. An installation on other binary compatible EL7 distributions such ...

  4. TortoiseGit保存用户名密码的方法

    方法一: 设置 -> git 编辑本地 .git/config 增加 1 [credential]    2     helper = store 保存,输入一次密码后第二次就会记住密码了 方法 ...

  5. URL设置问题

    URL设置那里删除了<item path="index.aspx" pattern="index.aspx"/>后,访问首页就不出来了,要加上/in ...

  6. 【java】基础中的杂乱总结（二）

    1 内部类进阶 package package8; //原则:先用内部类写 之后由于内部类匿名无法引用 用其继承的父类或实现的接口名 //再复写所有的抽象方法即可(是所有,否者还是抽象的,无法创建对象 ...

  7. OpenGL-------状态机

    状态机就是一种存在于理论中的机器,它具有以下的特点: 1. 它有记忆的能力,能够记住自己当前的状态. 2. 它可以接收输入,根据输入的内容和自己的状态,修改自己的状态,并且可以得到输出. 3. 当它进 ...

  8. Webkit之资源加载

    一.webkit资源分类 webkit中有多种资源,大致分为以下几种: HTML文本 CSS样式文本 - CachedCSSStyleSheet 字体 - CachedFont 图片 - Cached ...

  9. 使用HttpUtils 上传视频文件

    private void shangchuan(){                 //文件的路径        //File file=new File(path);        File fi ...

  10. Android真机连接手机Target显示unknown cmd命令下adb devices 显示offline

    主要原因是adb版本的问题: 1.找到adb.exe路径  比如:G:\BaiduYunDownload\Android\android-sdk\platform-tools,将该路径放到环境便利-- ...