选项卡切换
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tabSwitch {
border: 1px solid blue;
width: 500px;
height: auto;
position: relative;
margin: 100px auto;
}
.tab-title {
width: 500px;
}
.tab-title li {
float: left;
width: 25%;
height: 50px;
border-right: 1px solid purple;
background-color: skyblue;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.tab-content {
width:500px ;
height: auto;
}
.tab-content li {
width: 100%;
position: absolute;
left: 0;
top:50px;
background-color: #bd2c00;
color: #fff;
font-size: 50px;
text-align: center;
line-height: 400px;
/*隐藏*/
display: none;
}
</style>
</head>
<body>
<div class="tabSwitch">
<!--上面四个盒子 标题-->
<ul class="tab-title">
<li style="background-color: red">时政新闻</li>
<li>娱乐新闻</li>
<li>体育新闻</li>
<li>热点新闻</li>
</ul>
<!--下面内容盒子-->
<ul class="tab-content">
<li style="display: block">张</li>
<li>王</li>
<li>李</li>
<li>赵</li>
</ul>
</div>
<script src="获取元素.js"></script>
<script>
/*
* 1:获取元素
* 2：要给上面Title盒子绑定鼠标移入事件 onmouseover 移入 onmouseout移出
*
* 3：鼠标移入以后显示相应模块 相应?
*
* (1)设置自定义下标属性在4个title0,1,2,3
* (2)鼠标移入拿到index下标属性 内容盒子[index]显示或者隐藏
*
*
* */
/*onload 加载事件 保证静态资源 加载成功 */
window.onload = function () {
var titleLis = my$All('.tab-title li');
var contentLis = my$All('.tab-content li');
console.log(titleLis,contentLis)
for(var i =0;i<titleLis.length;i++){
titleLis[i].setAttribute('index',i)
titleLis[i].onmouseover = function () {
var index = this.getAttribute('index')
console.log(index)
for (var j=0;j<contentLis.length;j++){
contentLis[j].style.display='none'
titleLis[j].style.backgroundColor='skyblue'
}
contentLis[index].style.display='block'
titleLis[index].style.backgroundColor='red'
}
}
}
</script>
</body>
</html>
获取元素.js代码如下：
/*获取元素 ---》 一个 */
function my$(selector ) {
/*判断？ # */
return document.querySelector(selector)
}
function my$All(selector ) {
/*判断？ # */
return document.querySelectorAll(selector)
}结果如下：
排他思想
自己变化其它的都不要变化
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: #a71d5d;
float: left;
margin-left: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName('div')
for(var i =0;i<divs.length;i++){
divs[i].onclick = function () {
/*先全部变成上面默认背景色*/
for(var j =0;j<divs.length;j++){
divs[j].style.backgroundColor ='#a71d5d'
}
this.style.backgroundColor = 'yellow'
}
}
</script>
</body>结果如下：
