原生js选项卡
<!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选项卡的更多相关文章
- 原生JS 选项卡代码实现
可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js面向对象编程-选项卡(点击)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现tab选项卡
1.html部分 <body> <div id="tab"> <div class="tab_menu& ...
- 使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...
随机推荐
- Java并发编程实践读书笔记（2）多线程基础组件
同步容器 同步容器是指那些对所有的操作都进行加锁(synchronize)的容器.比如Vector.HashTable和Collections.synchronizedXXX返回系列对象: 可以看到, ...
- springboot(十五)：springboot+jpa+thymeleaf增删改查示例
这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...
- Hadoop：Rack Awareness
副本的放置对HDFS可靠性和性能至关重要. 优化副本放置HDFS有别于其他大多数分布式文件系统. 这是一个功能,需要大量的调优和经验. 基于机架感知(rack awareness)的副本放置策略的目的 ...
- spring boot oauth2的一些记录
oauth2及时从一个项目A申请另一个项目B的访问的时候,不用在项目A输入项目B的用户名和密码,个人理解先跳转到项目B,利用项目B的用户名和密码得到一个code之类的,这里有点像openID,不过不是 ...
- jspsmart(保存文件)+poi(读取excel文件)操作excel文件
写在前面: 项目环境:jdk1.4+weblogic 需求:能上传excel2003+2007 由于项目不仅需要上传excel2003,还要上传excel2007,故我们抛弃了jxl(只能上传exce ...
- Oracle初级——续续篇
逝者如斯夫,不舍昼夜 所有的SQL都经过测试,可粘贴,可复制,有问题请各位大神指出...... --约束 与表一起使用 约束不合理的数据,使其不能进入表中? ','李小龙','一班','该学生成天练武 ...
- python链接mysql
1.安装MySQLdb MySQLdb 是用于Python链接Mysql数据库的接口,它实现了 Python 数据库 API 规范 V2.0,基于 MySQL C API 上建立的. 下载地址: ht ...
- ArcGIS 网络分析[1.2] 利用1.1的线shp创建网络数据集/并简单试验最佳路径
上篇已经创建好了线数据(shp文件格式)链接:点我 这篇将基于此shp线数据创建网络数据集. 在此说明:shp数据的网络数据集仅支持单一线数据,也就是说基于shp文件的网络数据集,只能有一个shp线文 ...
- 重温javascript数据类型
在javaScript中,有五种简单的数据类型,分别是 Undefined Null Boolean Number String 还有一种复杂的数据类型object,object本质是有一组无序的名值 ...
- lesson - 5 课程笔记 which/ type / whereis /locate /pwd / etc/passwd/ shadow/ group / gshadow /useradd /usermod /userdel /passwd / su sudo
一.which 作用: which 命令用于查找并显示给定命令的绝对路径,环境变量PATH中保存了查找命令时需要遍历的目录, which 命令会在环境变量$PATH 设置的目录里查找符合条件的文件.也 ...