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函数代替.如果在一个循 ...
随机推荐
- androidstudio新建项目中在布局文件中不显示title的方法
在androidstudio新建项目的时候,在布局文件里有时候会出现如下情况: 上面的标题栏非常碍眼,要想隐藏标题栏的话,可以在Manifest文件的theme标签里进行配置,自定义一个theme,加 ...
- Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
Atitit.编程语言and 自然语言的比较and 编程语言未来的发展 1. 单词的间隔靠空格,编程的单词的间隔靠分界符..1 2. 语句分界符:自然语言使用逗号,编程语言使用分号1 3. 换行1 4 ...
- Asp.net 数据库依赖那些事
声明:本文为作者原创文章,转载请注明出处 https://www.cnblogs.com/MaMaNongNong/p/8904022.html 问题背景: 最近做一个非常简单的功能,就是使用ajax ...
- 【Nginx-反向代理server】基础知识（二）之多进程模式
Nginx的多进程模式 nginx在启动后.会有一个master进程和多个worker进程.master进程主要用来管理worker进程,包括:接收来自外界的信号.向各worker进程发送信号,监控w ...
- Python内置函数之any()
any()函数和all()函数相对立. 相同点为: any()也只能传入一个参数. any()的参数必须是可迭代对象. 不同点: 可迭代对象中只要有一个元素为True,返回值就是True. 下面看看具 ...
- IOS MagicRecord 详解 (转载)
2014-10-22 14:37 6137人阅读 评论(6) 收藏 举报 IOSMagicRecordCoreData 目录(?)[+] 刚开始接触IOS不久,尝试着翻译一些博客,积累技术,与大家共享 ...
- C++函数指针和类成员函数指针
一.函数指针——基本形式 char Fun(int n) { return char(n); } //char(*pFun)(int); void main() { char(*pFun)(int); ...
- csla 与高cpu
在项目中一直使用csla 4.13. 项目一直正常,但是偶尔会出现iis占用的cpu 突然100%, 后面客户量大的情况,加入了缓存的机制.100%的情况出现的更多了. 当时有数据库死锁的原因.cpu ...
- python 开发技巧（3）-- 连接mysql 出现错误 ModuleNotFoundError: No module named 'MySQLdb'
python3中使用mysql报错ModuleNotFoundError: No module named 'MySQLdb' 原因是:在python2.x中用mysqldb,但是在python3.x ...
- Elasticsearch5.X IN Windows 10 系列文章（2）
ElasticSearch版本: 5.5.1 (最新稳定版为5.5.2),由于用到IK中文分词插件,最新版本没有5.5.2 ,所以使用5.5.1 日期:2017-08-29 第二章:安装Kibana ...