JS——tab切换
2024-08-24 23:27:21
排它思想：
1、先让所有的元素恢复默认值
2、再让选中的元素赋专有的值
3、干掉所有人，剩下我一个
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .box1 {
width: 500px;
height: 400px;
border: 1px solid #b6ff00;
overflow: hidden;
margin: 100px auto;
} ul {
width: 510px;
height: 40px;
list-style: none;
} li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 400 15px/40px "simsun";
background-color: beige;
cursor: pointer;
} span {
display: none;
width: 500px;
height: 360px;
background-color: #ffd800;
text-align: center;
font: 700 150px/360px "simsun";
} .current {
background-color: #ffd800;
} .show {
display: block;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>鞋子</li>
<li>上衣</li>
<li>下装</li>
<li>棉衣</li>
<li>夏装</li>
</ul>
<span>鞋子</span>
<span>上衣</span>
<span>下装</span>
<span>棉衣</span>
<span>夏装</span>
</div>
<script>
var lis = document.getElementsByTagName("li");
var sps = document.getElementsByTagName("span");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
for (var j = 0; j < lis.length; j++) {
lis[j].className = lis[j].className.replace(/current/g, "");
}
this.className = this.className + " current";
for (var m = 0; m < sps.length; m++) {
sps[m].className = sps[m].className.replace(/show/, "");
}
for (var n = 0; n < sps.length; n++) {
if (sps[n].innerHTML == this.innerHTML) {
sps[n].className = sps[n].className + " show";
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: yellow;
} </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onmouseover = function () {
for (var j = 0; j < btns.length; j++) {
btns[j].className = btns[j].className.replace(/current/, "");//让所有的元素恢复默认值
}
this.className = this.className + " current";//让选中的元素赋专有的值
}
}
</script> </body>
</html>
最新文章
- perl 删除过期文件
- linux服务器apache 一个IP，一个端口，建立多个网站的方法。
- Form认证的几点说明
- ngModel 值不更新/显示
- 使用office制作图章公章
- 3.kvm的基本管理
- Oracle 10g Block Change Tracking特性
- java新项目的eclipse统一配置记录
- 避免多层回调，Node.js异步库Async使用(parallel)
- windows下搭建svn服务端、客户端
- Lamp下安装memcached
- windows平台 culture name 详细列表
- 如何消除word中的回车符号
- 图片上传插件用法,JS语法【三】
- C# 6.0：String Interpolation
- Windows下MongoDB的安装
- Java虚拟机垃圾收集器
- nginx windows版 下载和启动
- Jquery ajax load(),get(),post()
- Runloop原理