用JavaScript实现的选项卡
Codes wins arguments!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.tab {
border: 1px solid #000;
border-bottom-color: #FFF;
background-color: #FFF;
}
.tab-focus {
background-color: blanchedalmond;
} .conetent {
display: none;
min-width: 200px;
min-height: 200px;
box-shadow: 0 1px 1px #000;
}
</style>
<script>
window.onload = function () {
var tabs = document.querySelectorAll('.tab');
var contents = document.querySelectorAll('.conetent');
var last = tabs[0]; // 1.用来去除上一个选项卡选中的样式(tab tab-focus) for (var i = 0; i < tabs.length; i++) {
tabs[i].index = i; // 2.用来找选项卡对应的内容框
tabs[i].onclick = function () {
if (this !== last) {
this.className = 'tab tab-focus';
last.className = 'tab';
contents[this.index].style.display = 'block';
contents[last.index].style.display = 'none';
last = this;
}
}
}
}
</script>
</head>
<body>
<button class="tab tab-focus">选项1</button>
<button class="tab">选项2</button>
<button class="tab">选项3</button>
<div class="conetent" style="display: block;">内容1</div>
<div class="conetent">内容2</div>
<div class="conetent">内容3</div>
</body>
</html>
实现这个功能的核心就两点:1.用来表示上一个被点击的对象last;2.为每一个选项卡对象附加一个index属性。
引入对象last,是为了消除上一个对象被选中的样式(tab tab-focus),变为未选中状态(tab);
选项卡对象附加一个index属性,是为了找到它对应的内容框,然后隐藏上一个内容框。
(完)
用JavaScript实现的选项卡的更多相关文章
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- JavaScript效果之选项卡
拼了命学习js,想把学到的Javascript效果,可以记在博客里,在记录过程中,加深理解. gogogo,第一个效果,选项卡. 一.选项卡效果的实现思路 选项卡效果的应用很广泛,几乎所有的网站都会用 ...
- 闲扯 Javascript 01 实现选项卡
javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...
- javascript与jQuery选项卡效果
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- javascript简单的选项卡
实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Javascript进阶篇——总结--DOM案例+选项卡效果
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
随机推荐
- C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析与解决方法
对于C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析,目前本人分析两种情况,如下: 情况一: 借鉴麒麟.NET ...
- ubuntu不能正常登录
在ubuntu登录界面,输入密码后,出现一个界面后一闪而过又返回登录界面.查看auth.log发现如下错误 May 15 15:42:19 tim-vm lightdm: pam_unix(light ...
- DEDE有无缩略图如何调取
同一样式分开调取 [field:array runphp='yes']@me = (strpos(@me['litpic'],'defaultpic') ? "":"&l ...
- 使用OpenSSL为支付宝生成RSA私钥
通过openssl工具生成RSA的公钥和私钥(opnssl工具可在互联网中下载到,也可以点此下载无线接口包,里面包含此工具)打开openssl文件夹下的bin文件夹,执行openssl.exe文件: ...
- kafka Failed to send messages after 3 tries 问题解决
kafka Failed to send messages after 3 tries. 在kafka0.8开发过程中 生产者测试用例碰到了 Exception in thread "mai ...
- RDIFramework.NET框架SOA解决方案(集Windows服务、WinForm形式与IIS形式发布)-分布式应用
RDIFramework.NET框架SOA解决方案(集Windows服务.WinForm形式与IIS形式发布)-分布式应用 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架 ...
- 《30天自制操作系统》19_day_学习笔记
harib16a: 这一部分,我们在系统中实现读取文件内容的命令type.在windows中,输入“type 文件名”,在Linux中,输入“cat 文件名”都可以显示文件的内容.我们先来看看如何读取 ...
- HDU 4509 湫湫系列故事——减肥记II(线段树-区间覆盖 或者 暴力技巧)
http://acm.hdu.edu.cn/showproblem.php?pid=4509 题目大意: 中文意义,应该能懂. 解题思路: 因为题目给的时间是一天24小时,而且还有分钟.为了解题方便, ...
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- 多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。
如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type=&quo ...