【前端学习】网页tab键的实现 01
友情提醒：阅读本文需要了解一些基本的html/Css/Javascript知识
前端常用tab键的实现，用到的原理是当点击一个元素时，通过javascript操作css的display属性，达到控制另一个元素的显示(display: block)与不显示(display: none)
需要注意的是，由于使用的是onclick事件，该事件点击后会导致刷新，从而将原本应该从点击事件中获得显示的元素重置，回到初始隐藏状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test tabs 04</title>
<style type="text/css">
a {
text-decoration: none;
}
#content01 {
display:none;
}
#content02 {
display: none;
}
.tab_Btn {
display: inline-block;
width: 100px;
height: 40px;
color: black;
background: orange;
padding-top: 5px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<a class="tab_Btn" href="" onclick="showTabs(tab01);return false;">Tab1</a>
<a class="tab_Btn" href="" onclick="showTabs(tab02);return false;">Tab2</a>
<!-- 需要加return false 否则onclick事件会自动刷新 content又会默认置为display:none -->
</div>
<!-- content内容为默认隐藏的内容 -->
<div class="content" id="content01">
<p>Tab1 content</p>
</div>
<div class="content" id="content02">
<p>Tab2 content</p>
</div>
<script type="text/javascript">
var tab01 = document.getElementById("content01");
var tab02 = document.getElementById("content02");
//console.log(tab01); function showTabs(tab) {
if (tab01 == tab){
tab01.style.display = "block";
tab02.style.display = "none";
}
else{
tab02.style.display = "block";
tab01.style.display = "none";
}
}
</script>
</body>
</html>
【前端学习】网页tab键的实现 01的更多相关文章
- python学习笔记--导入tab键自动补全功能的配置
今天开始学习Python,必须配置tab键补全功能 1.首先我们需要查看python的安装路径 [root@abc ~]# python Python 2.6.6 (r266:84292, Jan 2 ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- 前端学习数据库MYSQL
这篇文章主要写了 1.数据库MYSQL 2.基本上会遇到的所有SQL语句 数据库可视化软件------Navicat 数据库里边存放的是表,表与表之间是有关联的,而且可以对表进行相关操作(增,删,改, ...
- web前端学习就这9个阶段，你属于哪个阶段？
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
随机推荐
- 【集训Day2 哈希表】【NHOI2015】【Luogu P2421】差
LuoguP2421 原题来自NHOI2015 [解题思路] 本题的解题方法有三种,一种为枚举减数,二分查找被减数.第二种为利用数据单调性用尺取法进行查找,第三种为运用哈希表以快速查找数据. [解题反 ...
- WebGPU学习（二）: 学习“绘制一个三角形”示例
大家好,本文学习Chrome->webgl-samplers->helloTriangle示例. 准备Sample代码 克隆webgl-samplers Github Repo到本地. ( ...
- 网页采集器-UA伪装
网页采集器-UA伪装 UA伪装 请求载体身份标识的伪装: User-Agent: 请求载体身份标识,通过浏览器发起的请求,请求载体为浏览器,则该请求的User-Agent为浏览器的身份标识,如果使用爬 ...
- apache虚拟主机配置的3种方式
Apache的虚拟主机功能 (Virtual Host) 是可以让一台服务器基于IP.主机名或端口号实现提供多个网站服务的技术. 下面我介绍一下这3种方式具体的配置流程: 一.基于ip地址 首先我们需 ...
- 转:SSL 握手协议详解
SSL 握手协议详解 RSA作为身份认证,ECDHE来交换加密密钥,AES/DES等作为加密. 如果RSA来加解密,那么身份认证后,直接用认证后的RSA公钥解密.不需要再额外交换加密密钥了. 相关报文 ...
- 快速搭建 Serverless 在线图片处理应用
作者:倚贤 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数 ...
- 洛谷 题解 P1351 【联合权值】
Problem P1351 [联合权值] record 用时: 99ms 空间: 13068KB(12.76MB) 代码长度: 3.96KB 提交记录: R9883701 注: 使用了 o1 优化 o ...
- 第二节.NET两种交互模式：c/s和b/s
1.什么是c/s c指的是client(客户端),s指的是服务器模式,c/s是client/Server的缩写,客户端需要安装专业的客户端软件,如我们用的qq.酷狗音乐等客户端软件 ...
- iOS和webppy图片的爱恨情仇
如果iOS是个好哥哥,webppy一定是一个持家能干的漂亮姑娘
- 《手把手教你》系列进阶篇之4-python+ selenium自动化测试 - python几种超神操作你都知道吗？（详细教程）
1. 简介 今天分享和讲解的超神操作,对于菜鸟来说是超神的操作,对于大佬来说也就是几个简单方法的封装和调用.这里讲解和分享这部分主要是为了培养小伙伴们和童鞋们的面向对象的开发思维,对比这样做的好处让你 ...