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函数代替.如果在一个循 ...
随机推荐
- js使用ctrl+s保存表单提升用户体验
本质上是监控ctrl+s 然后触发相应事件 <script language="JavaScript"> //Ctrl+s保存 document.onkeydown=f ...
- IOS安装CocoaPods完整流程
作为一个底层系统大菜鸟,又搞过几年ios来说,安装一个CocoaPods是一件蛋痛的事~ 说懂又懂,说不懂又不懂. 由于安装过程比較复杂,步骤较多,而网上教程又比較零散,并且有一些是扯蛋的,所 ...
- js 从数组中随机获取一个值
// 获取随机数 var rand = Math.floor( Math.random() * this.peoples.length ); // 随机从数组中取出某值(不会改变原数组) var da ...
- JSONP（转）
1 什么是Jsonp? JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域要数据.另一个解决这个问题的新方法是跨来源资源共享. 由于同源策略,一 ...
- atitit.极光消息推送服务器端开发实现推送 jpush v3. 总结o7p
atitit.极光消息推送服务器端开发实现推送 jpush v3. 总结o7p 1. 推送所设计到底功能1 1.1. 内容压缩1 1.2. 多引擎1 2. reg ,设置appkey and pw ...
- Java并发编程（十四）并发容器类
同步容器将所有对容器状态的访问都串行化,以实现线程安全性.这种方法的代价是严重降低并发性,当多个线程竞争容器的锁时,吞吐量将严重减低. 另一个方面,并发容器是针对多个线程并发访问设计的.在java 5 ...
- python之filter（）函数
filter()函数是python内置的一个高阶函数. filter()函数接受一个函数f 和一个list,这个函数f的作用是对每个元素进行判断,返回True或False,filter()根据判断结果 ...
- C#通过修改注册表改变IE默认选项
修改注册表,这个代码好实现,关键是怎么找到对应的注册表值,也就是说画一条线很容易,难的是找到要在哪里画,然后我百度了一圈,出来的都是画线的,没有指出或者指出的不全的注册表对应值,只能FQ谷歌了,也就有 ...
- Web Services 概要
WSDL WSDL 是基于 XML 的用来描述 Web services 以及如何访问它们的一种语言. WSDL 可描述 web service,连同用于 web service 的消息格式和协议的细 ...
- Android之——JNI配置C语言打印Logcat信息
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47425073 这篇文章给大家介绍一下在JNI中怎样为C语言配置打印Logcat信息 ...