原生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部分 ...
随机推荐
- Python爬虫Scrapy(二)_入门案例
本章将从案例开始介绍python scrapy框架,更多内容请参考:python学习指南 入门案例 学习目标 创建一个Scrapy项目 定义提取的结构化数据(Item) 编写爬取网站的Spider并提 ...
- [UWP]了解模板化控件(7):支持Command
以我的经验来说,要让TemplatedControl支持Command的需求不会很多,大部分情况用附加属性解决这个需求会更便利些,譬如UWPCommunityToolkit的HyperlinkExte ...
- 10个最有用的 IntelliJ IDEA 插件
IntelliJ IDEA鼓舞了许多Java开发人员编写插件,从J2EE到代码编辑工具再到游戏.现在,它拥有了一个强大的插件生态系统,超过1500可用的插件以及几乎每周都有新的插件出现.在这篇文章中, ...
- ERR Unsupported CONFIG parameter: notify-keyspace-events; nested exception is redis.clients.jedis.exceptions.JedisDataException
异常信息 时间:2017-04-05 15:53:57,361 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...
- Asp.Net Web API中使用Session,Cache和Application的几个方法
在ASP.NET中,Web Api的控制器类派生于ApiController,该类与ASP.NET的Control类没有直接关系,因此不能像在Web MVC中直接使用HttpContext,Cache ...
- C#中的GET和SET访问器
我们在学习C#语法的属性时,都要首先和GET,SET访问器打交道,从英文的字面意思上理解,GET应该就是获得什么什么,而SET应该是设置什么什么,那我们看一下,官方是怎么定义这对访问器的:get是读取 ...
- JS判断终端
//判断手机终端 if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) { window.location.href = 'mobil ...
- button的用法
C# 如何去掉button按钮的边框线? 设置FlatStyle为Flat,并且设置FlatAppearance下的BorderSize为0.
- ORACLE环境变量设置
用oracle帐号登录,配置相关环境变量: vi .bash_profile export ORACLE_BASE=/u01/app/oracleexport ORACLE_HOME=/u01/app ...
- bzoj 4237: 稻草人
Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要 ...