友情提醒：阅读本文需要了解一些基本的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的更多相关文章

  1. python学习笔记--导入tab键自动补全功能的配置

    今天开始学习Python,必须配置tab键补全功能 1.首先我们需要查看python的安装路径 [root@abc ~]# python Python 2.6.6 (r266:84292, Jan 2 ...

  2. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. 前端学习:学习笔记(JS部分）

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  6. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. 前端学习数据库MYSQL

    这篇文章主要写了 1.数据库MYSQL 2.基本上会遇到的所有SQL语句 数据库可视化软件------Navicat 数据库里边存放的是表,表与表之间是有关联的,而且可以对表进行相关操作(增,删,改, ...

  9. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

随机推荐

  1. 痞子衡嵌入式：恩智浦机器视觉模块OpenMV-RT那些事（1）- 初体验

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是机器视觉模块OpenMV-RT初体验. 近些年机器视觉应用一直是个很火的方向,想象一下机器如果能长上"眼睛",是不 ...

  2. 盒模型 | CSS权重 | CSS层叠

    span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...

  3. 预分配——fallocate的前世今生

    最近比较懒,还是加班写点东西吧,不然过段时间又把这些整理的东西弄丢了. 写什么呢?写一些跟工作相关的吧!因为笔者从事多媒体录像相关的开发工作,因此常常涉及到优化写卡策略.提升写卡性能相关的方面的事情. ...

  4. 程序员的进阶课-架构师之路（9）-平衡二叉树（AVL树）

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...

  5. Layui下拉3级联动

    这里我就不给大家详细说明了直接附图: js代码: layui.use(['layer', 'form','xform','layer'], function () { var element = la ...

  6. 第三章 学习Shader所需的数学基础（4）

    法线变换 法线(normal),也被称为法矢量(normal vector).在以前我们已经讲过如何使用变换矩阵来变换一个顶点或方向矢量,但法线是需要我们特殊处理的一种方向矢量.在游戏中,模型的顶点往 ...

  7. 2019-2020-1 20199304《Linux内核原理与分析》第九周作业

    第八章 进程的切换和系统的一般执行过程 知识点 1.进程调度的时机 1.1硬中断和软中断 中断是指在计算机执行期间,系统内发生任何非寻常的或非预期的急需处理事件,使得CPU暂时中断当前正在执行的程序而 ...

  8. 浅谈C#中的序列化与反序列化

    今天我利用这篇文章给大家讲解一下C#中的序列化与反序列化.这两个概念我们再开发中经常用到,但是我们绝大部分只用到了其中的一部分,剩下的部分很多开发人员并不清楚,甚至可以说是不知道.因此我希望通过这篇文 ...

  9. Python 命令行之旅：深入 click 之增强功能

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  10. flutter最简单轻量便捷的路由管理方案NavRouter

    大家好,我是CrazyQ1,今天给大家推荐一个路由管理方案,用的非常不错的,叫nav_router. 项目地址是:https://github.com/fluttercandies/nav_route ...