<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         *{

             padding:0;

             margin:0;

         }

         .tab{

             width: 300px;

             height: 300px;

             border:1px solid #333;

             margin:50px auto;

         }

         .tab .hd{

             height:40px;

             line-height: 39px;

             text-align: center;

             overflow: hidden;

         }

         .tab .hd span{

             float: left;

             width: 99px;

             height:39px;

             border-left:1px solid #333;

             border-bottom:1px solid #333;

         }

         .tab .hd span:first-child{

             width: 100px;

             border-left: none;

         }

         .tab .hd span.cur{

             background-color: lightblue;

             border-bottom: none;

             font-weight: bold;

         }

         .tab .bd{

             overflow: hidden;

         }

         .tab .bd div{

             width: 100%;

             height: 260px;

             display: none;

         }

         .tab .bd div.cur{

             display: block;

         }

     </style>

 </head>

 <body>

     <div class="tab">

         <div class="hd" id="hd">

             <span class="cur">新闻</span>

             <span>体育</span>

             <span>时尚</span>

         </div>

         <div class="bd" id="bd">

             <div class="cur">新闻</div>

             <div>体育</div>

             <div>时尚</div>

         </div>

     </div>        

     <script type="text/javascript">

         // 获取元素

         var spans = document.getElementById("hd").getElementsByTagName("span");

         var divs = document.getElementById("bd").getElementsByTagName("div");

         // 批量给span添加鼠标进入事件

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

             // 将i保存在index属性中

             spans[i].index = i;

             spans[i].onmouseenter = function(){

                 // 所有的span恢复原状

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

                     spans[j].className = "";

                 }

                 // 特殊的那个span加cur。

                 this.className = "cur";

                 // div对应和排他

                 // 所有div恢复原状

                 for(var k = 0 ; k < divs.length ; k ++){

                     divs[k].className = "";

                 }

                 // 对应的div加cur

                 divs[this.index].className = "cur";

             };

         }

     </script>

 </body>

 </html>

原生js选项卡的更多相关文章

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

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

  2. 原生js简易日历效果实现

    这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...

  3. 原生js实现tab选项卡里内嵌图片滚动特效代码

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

  4. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  5. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  6. 原生js面向对象编程-选项卡(自动轮播)

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

  7. 原生js面向对象编程-选项卡(点击)

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

  8. 原生js实现tab选项卡

    1.html部分 <body>        <div id="tab">            <div class="tab_menu& ...

  9. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

随机推荐

  1. linux 磁盘管理三部曲——（1）磁盘结构，认识分区

    最近小编整理了磁盘管理的相关知识,发现还是挺多的,所有就分了三个部分来给大家分享一下: 1.磁盘结构,认识分区 2.管理分区,文件系统格式化 3.mount挂载,/etc/fstab配置文件 这篇就先 ...

  2. 使用python实现群发邮件

    最近在工作时,需要实现在公司开发的调度系统上实现:将每天产生的游戏数据查询统计出,并发送邮件给数据分析的开发人员. 考虑到python语言的简洁易上手,在我没有任何python基础的情况下,十分轻松的 ...

  3. 关于Idea中右边的maven projects窗口找不到了如何调出来

    关于Idea中右边的maven  projects窗口找不到了如何调出来? 具体的idea版本我不太清楚,我用的是2016版,其他版本应该也是一样的. 首先idea自带了maven控件,不像Eclip ...

  4. Java中参数传递问题

    Java中参数传递可以分为值传递和引用传递,话不多说直接撸代码 1.传原始类型(int,String等)数据是值传递 package test_1; public class Test { publi ...

  5. 如何高效撤销Git管理的文件在各种状态下的更改

    一.背景 企业中我们一般采用分布式版本管理工具git来进行版本管理,在团队协作的过程中,我们难免会遇到误操作,需要撤销更改的情况,那么我们怎么高效的进行撤销修改呢?对于还未提交到暂存区的代码怎么高效撤 ...

  6. Java中的集合概述

    Java中的集合类有两个重要的分支,分别是接口Collection(包括List,Set等)和接口Map. 由于HashSet的内部实现原理使用了HashMap,所以我们先来了解Map集合类. 1.H ...

  7. shell if相关参数

    [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为真. [ -c FILE ] 如果 FILE 存在且是一个字特殊文件则为真. [ ...

  8. BZOJ 4818 SDOI2017 序列计数

    刚出炉的省选题,还是山东的. 自古山东出数学和网络流,堪称思维的殿堂,比某地数据结构成风好多了. 废话不说上题解. 1.题面 求:n个数(顺序可更改),值域为[1,m],和为p的倍数,且这些数里面有质 ...

  9. JS画几何图形之五【过圆外一点作切线】

    样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 func ...

  10. 获取数据库时间sql 以及行级锁总结-共享锁-排他锁-死锁

    --TRUNC(date,[fmt]) /TRUNC(number[,decimals])SELECT SYSDATE FROM dual;SELECT TRUNC(SYSDATE) FROM dua ...