<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
display: inline-block;
padding: 30px;
}
.moren {
background-color: red;
}
.item {
display: none;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<div class="one">
<ul>
<li class="moren">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="two">
<div class="item" style="display: block;">商品介绍内容</div>
<div class="item">规格与包装内容</div>
<div class="item">售后保障内容</div>
<div class="item">产品评间内容</div>
<div class="item">手机社区内容</div>
</div>
</body>
<script>
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</html>
运行结果如下:
核心思想就是(我说的比较通俗):第一步,点击导航栏的时候,会变色,很简单,就是一个“排他思想”,注意:隐藏所有在前面,当点击的时候,对应的显示在后面。第二步,导航栏的时候,对于内容会出现,这里比较复杂,就是,给所有的标题自定义属性,用for循坏,当点击哪个标题,对应的内容显现。(这里还是排他思想)因为其他的内容不显示。对应可以看两个for循坏里面的内容很相似。