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) ...