1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.  
  8.          *{
  9.              padding:0;
  10.              margin:0;
  11.          }
  12.          .tab{
  13.              width: 300px;
  14.              height: 300px;
  15.              border:1px solid #333;
  16.              margin:50px auto;
  17.          }
  18.          .tab .hd{
  19.              height:40px;
  20.              line-height: 39px;
  21.              text-align: center;
  22.              overflow: hidden;
  23.          }
  24.          .tab .hd span{
  25.              float: left;
  26.              width: 99px;
  27.              height:39px;
  28.              border-left:1px solid #333;
  29.              border-bottom:1px solid #333;
  30.          }
  31.          .tab .hd span:first-child{
  32.              width: 100px;
  33.              border-left: none;
  34.          }
  35.          .tab .hd span.cur{
  36.              background-color: lightblue;
  37.              border-bottom: none;
  38.              font-weight: bold;
  39.          }
  40.          .tab .bd{
  41.              overflow: hidden;
  42.          }
  43.          .tab .bd div{
  44.              width: 100%;
  45.              height: 260px;
  46.              display: none;
  47.          }
  48.          .tab .bd div.cur{
  49.              display: block;
  50.          }
  51.  
  52.      </style>
  53.  </head>
  54.  <body>
  55.      <div class="tab">
  56.          <div class="hd" id="hd">
  57.              <span class="cur">新闻</span>
  58.              <span>体育</span>
  59.              <span>时尚</span>
  60.          </div>
  61.          <div class="bd" id="bd">
  62.              <div class="cur">新闻</div>
  63.              <div>体育</div>
  64.              <div>时尚</div>
  65.          </div>
  66.      </div>        
  67.  
  68.      <script type="text/javascript">
  69.          // 获取元素
  70.          var spans = document.getElementById("hd").getElementsByTagName("span");
  71.          var divs = document.getElementById("bd").getElementsByTagName("div");
  72.  
  73.          // 批量给span添加鼠标进入事件
  74.          for(var i = 0 ; i < spans.length ; i ++){
  75.              // 将i保存在index属性中
  76.              spans[i].index = i;
  77.  
  78.              spans[i].onmouseenter = function(){
  79.                  // 所有的span恢复原状
  80.                  for(var j = 0 ; j < spans.length ; j ++){
  81.                      spans[j].className = "";
  82.                  }
  83.                  // 特殊的那个span加cur。
  84.                  this.className = "cur";
  85.  
  86.                  // div对应和排他
  87.                  // 所有div恢复原状
  88.                  for(var k = 0 ; k < divs.length ; k ++){
  89.                      divs[k].className = "";
  90.                  }
  91.                  // 对应的div加cur
  92.                  divs[this.index].className = "cur";
  93.              };
  94.          }
  95.  
  96.      </script>
  97.  </body>
  98.  </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 安装tensorflow（gpu版本）

    一.安装cuda 具体安装过程见我的另一篇博客,ubuntu16.04下安装配置深度学习环境 二.安装tensorflow 1.具体安装过程官网其实写的比较详细,总结一下的话可以分为两种:安装rele ...

  2. Uva 01124, POJ 3062 Celebrity jeopardy

    It's hard to construct a problem that's so easy that everyone will get it, yet still difficult enoug ...

  3. Caused by: java.net.SocketException: Broken pipe

    异常信息 时间:2017-03-24 17:22:16,719 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...

  4. laravel基本信息

    1.Bundle是Laravel的扩展包组织形式或称呼.Laravel的扩展包仓库已经相当成熟了,可以很容易的帮你把扩展包(bundle)安装到你的应用中.你可以选择下载一个扩展包(bundle)然后 ...

  5. 【java】ArrayList、Iterator用法

    package com.tn.collect; import java.util.ArrayList; import java.util.Iterator; class Product{ public ...

  6. 谷歌浏览器插件-jsonView插件安装与使用

    本文转载:http://www.bubuko.com/infodetail-700647.html 1 安装 1.打开 https://github.com : 2.搜索 jsonView 链接:ht ...

  7. linux集群批量执行命令

    因为工作需要,需要修改集群中机器的配置,一台一台的修改太浪费时间,就想能不能通过自动化脚本批量执行命令,尝试写一个,自己shell不熟悉,写的有点渣渣 if [ "$#" -ne ...

  8. Search an Element in an array

    Given an integer array and an element x, find if element is present in array or not. If element is p ...

  9. JAVA NIO学习三：NIO 的非阻塞式网络通信

    紧接着上一章,我们继续来研究NIO,上一章中我们讲了NIO 中最常见的操作即文件通道的操作,但实际上NIO的主要用途还是在于网络通信,那么这个时候就会涉及到选择器,这一章我们就会对其进行讲解操作. 一 ...

  10. Python核心编程--浅拷贝与深拷贝

    一.问题引出浅拷贝 首先看下面代码的执行情况: a = [1, 2, 3] print('a = %s' % a) # a = [1, 2, 3] b = a print('b = %s' % b) ...