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函数代替.如果在一个循 ...
随机推荐
- Access 连接字符串全集
连接 Access 2007 的操作方法 //无密码的连接字符串 string conStr = "Provider=Microsoft.Ace.OleDb.12.0;"; c ...
- css之定位学习
如需转载烦请注明出处: 英文原文:http://www.vanseodesign.com/css/css-positioning/ 中文译文:http://www.w3cplus.com/blog/p ...
- Android布局中match_parent和fill_parent的差别
今天在做项目的一个新功能的时候,从网上查找资源,发现android2.2中出现的MATCH_PARENT感到不明确.过去仅仅有FILL_PARENT和WRAP_CONTENT那么match_paren ...
- xcode，不要将.a文件拖到xcode里
如果将.a文件拖到xcode里,它自动生成的search path是错的.导致奇怪的编译错误,非常坑.这是xcode的一个bug. 或者为了省事直接将.a拖进xcode也行,但记着去Library S ...
- Atitit eclipse新特性总结3.1---4.4 4.5
Atititeclipse新特性总结3.1---4.4 4.5 1. Eclipse 4.4 Luna正式发布了.1 1.1. 新版本的Eclipse默认对Java8提供支持1 1.2. 内存分析器 ...
- SDRAM驱动篇之简易SDRAM控制器的verilog代码实现
在Kevin写的上一篇博文<SDRAM理论篇之基础知识及操作时序>中,已经把SDRAM工作的基本原理和SDRAM初始化.读.写及自动刷新操作的时序讲清楚了,在这一片博文中,Kevin来根据 ...
- codeblocks中给GCC编译器加参数
在使用gcc命令行编译的时候可以使用gcc xxx.c -o xxx.exe -std=c99来使用c99标准编译 但是在codeblocks中默认是不使用c99标准编译的,如何加参数呢? Setti ...
- linux管理员工具
htop 任务管理器 bmon 网络监控 ### 详情 --------------------------------------------------- htop 任务管理器 bmon 网络监控
- scp命令的用法
用法: scp 命令 scp 能够在 2个 linux 主机间拷贝文件: 命令基本格式: scp [可选參数] file_source file_target ====== 从 本地 拷贝到 远程 拷 ...
- JIRA /mnt/server/atlassian-jira-6.3.6-standalone/bin/start-jira.sh
JIRA 敏捷开发平台部署记录 分类: 敏捷开发 1.1 jira说明 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪. ...