运用的是排他思想。排他思想,就是排除所有人(留下我自己),然后设置自己。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#wrap {
position: relative;
top: 10px;
left: 10px;
}
#wrap button {
padding: 3px 5px;
margin: 5px 10px;
}
#wrap button.active {
background-color: lightpink;
color: deeppink;
}
#wrap p {
width: 200px;
height: 200px;
border: 1px solid #000;
position: absolute;
top: 40px;
left: 10px;
font-size: 24px;
line-height: 200px;
text-align: center;
display: none;
}
#wrap p.active {
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<button class="active">菜单1</button><button>菜单2</button><button>菜单3</button>
<p class="active">内容1</p>
<p>内容2</p>
<p>内容3</p>
</div>
</body>
</html>
<script>
var wrap = document.getElementById('wrap');
var btns = wrap.getElementsByTagName('button');
var ps = wrap.getElementsByTagName('p');
console.log(btns, ps);
// 2.每一个
for (var i = 0; i < btns.length; i++) {
// 自定义索引
btns[i].index = i;
btns[i].onclick = function () {
console.log(this.index);
for (var j = 0; j < ps.length; j++) {
ps[j].className = '';
btns[j].className = '';
}
// 指定下标
ps[this.index].className = 'active';
btns[this.index].className = 'active';
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
ul{
list-style: none;
background:#f5f5f5;
width: 420px;
height: 30px;
line-height: 30px;
text-align: center;
margin:0 auto;
}
ul li{
float: left;
margin-right: 36px;
border-top: 1px solid transparent;
cursor: pointer;
}
ul li:first-child{
border-top: 1px solid green;
color: green;
}
.news{
width: 462px;
height: 200px;
margin:0 auto;
display: none;
}
.news:nth-of-type(1){
display: block;
}
.news>p{
border-bottom: 3px solid #f5f5f5;
padding-bottom: 12px;
}
</style>
</head>
<body>
<ul id="title">
<li>推荐</li>
<li>国内</li>
<li>国际</li>
<li>娱乐</li>
<li>体育</li>
<li>科技</li>
</ul>
<div class="news">
<p>这是推荐新闻1</p>
<p>这是推荐新闻2</p>
<p>这是推荐新闻3</p>
</div>
<div class="news">
<p>这是国内新闻1</p>
<p>这是国内新闻2</p>
<p>这是国内新闻3</p>
</div>
<div class="news">
<p>这是国际新闻1</p>
<p>这是国际新闻2</p>
<p>这是国际新闻3</p>
</div>
<div class="news">
<p>这是娱乐新闻1</p>
<p>这是娱乐新闻2</p>
<p>这是娱乐新闻3</p>
</div>
<div class="news">
<p>这是体育新闻1</p>
<p>这是体育新闻2</p>
<p>这是体育新闻3</p>
</div>
<div class="news">
<p>这是科技新闻1</p>
<p>这是科技新闻2</p>
<p>这是科技新闻3</p>
</div>
<script src="js/index.js"></script>
</body>
</html>
<script>
window.onload = function(){
//获取到每一个标题,返回的是一个类数组,所以下面要用循环,为每一项设置点击事件
//"title"只是ul的id 标题在li中,所以要.children
var item = document.getElementById("title").children;
//获取到每一个新闻内容,返回一个类数组
var news = document.getElementsByClassName("news");
//给导航标题设置点击事件
for (var i = 0; i < item.length; i++) {
//为每个导航标题设置index值,之后我们把这个值传给news并作为news的索引
//这样就能将导航标题与下方的新闻一一对应起来
item[i].index = i;
item[i].onclick = function(){
//排他
// paiTa();
//给标题戴绿帽并让他变绿^_^
this.style.color = "green";
this.style.borderTop = "1px solid green";
// 把index值传给news,让对应的新闻显示,这里的this指的是当前点击的item
news[this.index].style.display = "block";
}
}
//1.先给导航自身排他。把大家设置为原来的样式,然后再把自己变绿这样就只有自己是绿色的。
//2.再给下方内容排他。先把所有的新闻内容隐藏,再把相应的新闻内容显示出来。
function paiTa(){
for (var j = 0; j < item.length; j++) {
item[j].style.color = "#000";
item[j].style.borderTop = "1px solid transparent";
news[j].style.display = "none";
}
}
}
</script>