夜光序言：
多年以后，当我又开始回忆那些失去的人或事时，我一定会豁达的抿着嘴微笑，微笑着回忆一切，包括你，包括曾经迷失过自我的自己。
正文：
JS夜光 |
复习tab栏夜光 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div class="box">
<div class="mt">
<span>新闻</span>
<span>体育</span>
<span>八卦</span>
<span>娱乐</span>
</div>
<div class="mb">
<ul>
<li>
</li>
</ul>
</div>
</div>
</body>
</html>
// 帅气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> //学会精准书写css js 语言 基本功
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{
width: 250px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
<div class="mt">
<span>新闻</span>
<span>体育</span>
<span>八卦</span>
<span>娱乐</span>
</div>
<div class="mb">
<ul>
<li>
</li>
</ul>
</div>
</div>
</body>
</html>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{
width: 340px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
.mt span{
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
}
</style>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{
width: 340px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
.mt span{
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.mb li{
height: 270px;;
width: 340px;
background-color: antiquewhite;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{
width: 340px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.mt span{
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.mt span.current{
background-color: aquamarine;
}
.mb li{
height: 270px;;
width: 340px;
background-color: antiquewhite;
display: none;
}
.mb li.a{
display: block;
}
</style>
<script>
window.onload = function(){
var spans = document.getElementsByTagName("span"); //得到所有span
var lis = document.getElementsByTagName("li"); /* //得到所有li*/
for(var i=0;i<spans.length;i++)
{
spans[i].onmouseover = function(){
//清除所有span类
/*spans.calssName = "";*/
for(var j=0;j<spans.length;j++)
{
spans[j].className = "";
}
//留下自己 排他思想
this.className= "current";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>八卦</span>
<span>娱乐</span>
</div>
<div class="mb">
<ul>
<li class="a">新闻模块</li>
<li>新闻模块</li>
<li>新闻模块</li>
<li>新闻模块</li>
</ul>
</div>
</div>
</body>
</html>
以上不断优化 操作
<script>
window.onload = function(){
var spans = document.getElementsByTagName("span"); //得到所有span
var lis = document.getElementsByTagName("li"); /* //得到所有li*/
for(var i=0;i<spans.length;i++)
{
spans[i].index = i; //这句话十分关键 核心中核心
spans[i].onmouseover = function(){
//清除所有span类
/*spans.calssName = "";*/
for(var j=0;j<spans.length;j++)
{
spans[j].className = "";
lis[j].className = "";
}
//留下自己 排他思想 // this。index 是span的索引号 被li使用了
this.className= "current";
lis[this.index].className = "show";
}
}
}
</script>