javascript实例:两种方式实现tab栏选项卡
方法1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} ul {
list-style: none;
} #tab {
width: 480px;
margin: 20px auto;
border: 1px solid red;
} ul {
width: 100%;
overflow: hidden;
} ul li {
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
} ul li a {
text-decoration: none;
color: black;
} li.active {
background-color: lightpink;
} p {
display: none;
height: 200px;
line-height: 200px;
text-align: center;
background-color: lightpink;
} p.active {
display: block; } </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p> </div>
</body>
<script type="text/javascript"> // 获取li标签,注意是复数
var olis = document.getElementsByTagName('li');
// 获取p标签,注意是复数
var oPs = document.getElementsByTagName('p');
// 循环li标签
var i; // 变量提升
for (i = 0; i < olis.length; i++) {
// 保存i的变量,因为i为全局的,i最终为3-->(变量提升)
olis[i].index = i;
// 给每个li标签绑定事件
olis[i].onclick = function () {
// for循环清空之前属性
for (var j = 0; j < olis.length; j++) {
// 清楚li标签属性
olis[j].className = '';
// 清楚p标签属性
oPs[j].className = ''
}
// 鼠标点击谁,谁就属性加上active
this.className = 'active';
oPs[this.index].className = 'active';
} } </script>
</html>
方法2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} ul {
list-style: none;
} #tab {
width: 480px;
margin: 20px auto;
border: 1px solid red;
} ul {
width: 100%;
overflow: hidden;
} ul li {
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
} ul li a {
text-decoration: none;
color: black;
} li.active {
background-color: lightpink;
} p {
display: none;
height: 200px;
line-height: 200px;
text-align: center;
background-color: lightpink;
} p.active {
display: block; } </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p> </div>
</body>
<script type="text/javascript"> // 获取li标签,注意是复数
let olis = document.getElementsByTagName('li');
// 获取p标签,注意是复数
let oPs = document.getElementsByTagName('p');
// 循环li标签
for (let i = 0; i < olis.length; i++) { // 给每个li标签绑定事件
olis[i].onclick = function () {
// for循环清空之前属性
for (let j = 0; j < olis.length; j++) {
// 清楚li标签属性
olis[j].className = '';
// 清楚p标签属性
oPs[j].className = ''
}
// 鼠标点击谁,谁就属性加上active
this.className = 'active';
oPs[i].className = 'active';
} } </script>
</html>
javascript实例:两种方式实现tab栏选项卡的更多相关文章
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- svg中实现文字随曲线走向，HTML直接写和JavaScript创建对象两种方式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- @Autowired获取配置文件中被注入实例的两种方式
一.说明 二.那么在JavaBean中如何通过@Autowired获取该实例呢?有两种方式: 1.直接获取 @RunWith(SpringJUnit4ClassRunner.class) @Conte ...
- JavaScript对象属性访问的两种方式
JavaScript对象属性访问的两种方式 object.attribute object["attribute"] 例如: var employees = [ { "f ...
- Flex（ActionScript）与JavaScript交互的两种方式示例
随着各单位部门信息化进程的不断发展,互通互联.共享协调不断的被越来越多的客户所重视.很多新项目都要去必须能够集成已有的早期系统,至少也要能够实现交互对接.今天跟大家分享的是系统对接中ActionScr ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- javascript消除字符串两边空格的两种方式，面向对象和函数式编程。python oop在调用时候的优点
主要是javascript中消除字符串空格,比较两种方式的不同 //面向对象,消除字符串两边空格 String.prototype.trim = function() { return this.re ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- javascript中实现sleep的两种方式
最近在js中要使用到类似于C++中的sleep函数(让cpu休眠).但是js是不可能让cpu休眠,所以可以通过下面的两种方式模拟sleep函数. 方式一:使用setTimeout函数代替.如果在一个循 ...
随机推荐
- lucene: 索引建立完后无法查看索引文件中的数据
索引建立时 1.对原有索引文件进行建立,是可以访问索引文件中的数据的 2.建立新索引文件,必须等建立完毕后,才可以访问,新建立的文件如果没有建立完是不可以被访问的 如果想建 ...
- VS中 无法创建虚拟目录 本地IIS IIS Express 外部主机
从前就有个疑问了,为什么我拉取别人写好的代码后就可以在IIS里面生成一个网站呢? 这里所谓的生成网站,是指包含了所有源代码文件的网站:相对地,发布网站,就是指包含被编译的源文件所得到的DLL文件的网站 ...
- Scrapy:虎牙爬取，图片存储与数据分析
第一次爬取虎牙主播数据,有点小激动 1.共批量爬取的101个主播的,包括 头像 主播名字 房间号 房间链接 2.数据规整部分,需要将json数据加载到pandas的Dataframe,只显示的前15个 ...
- hdu 3641 数论 二分求符合条件的最小值数学杂题
http://acm.hdu.edu.cn/showproblem.php?pid=3641 学到: 1.二分求符合条件的最小值 /*================================= ...
- window安装rabbitmq
Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装Rabbit MQ的前提是安装Erlang.通过下面两个连接可以下载安装最新的版本: 下载并安装Eralng OTP For Wi ...
- Google I/O 2014 大会总结 Android开发新方向
昨天晚上,Google I/O 2014大会召开,会上主要展示了下面几个部分的创新内容: Android L 操作系统 首先是界面,谷歌又一次设计了一套 UI 规范.并称之为"Materia ...
- Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致 推荐1 2. Apache 反向代理 推荐1 ...
- Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php c#.Net
Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php c#.Net 1. -catalog与schema的设计区别1 ...
- 获取CPU个数
PROCESSER=`grep 'processor' /proc/cpuinfo | wc -l` JOBSS=$[$PROCESSER*2]
- linux用户密码生成
linux账户保存在/etc/passwd,密码保存在/etc/shadow. 通过man 5 passwd,man 5 shadow可查看文件中各字段含义. encrypted password ...