效果图参考:
基本实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 60%;
margin: 50px auto;
background-color: #99aecb;
height: 500px;
}
.title {
background-color: #cccccc;
border-bottom: red solid 1px;
}
.title li {
display: inline-block;
padding: 10px;
}
.title .activate {
color: white;
background-color: red;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="outer">
<ul class="title">
<li class="activate" relate="1">商品介绍</li>
<li relate="2">规格包装</li>
<li relate="3">售后保障</li>
</ul>
<div class="content">
<div id="1">page1</div>
<div class="hide" id="2">page2</div>
<div class="hide" id="3">page3</div>
</div>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
//点击title内的三个标题,this增加activate,其余去除activate
//取得this的索引,根据索引取出content中对应的页面,去除hide, 其余页面加hide
//jq事件委派
$(".title").on("click", "li", function () { //记住,子元素没有$
$(this).addClass("activate");
$(this).siblings().removeClass("activate");
var $index = $(this).index();
$(".content div").eq($index).removeClass("hide").siblings().addClass("hide");
});
//jq事件绑定实现
// $("li").click(function(){
// $(this).addClass("activate");
// $(this).siblings().removeClass("activate");
// var $index = $(this).index();
// $(".content div").eq($index).removeClass("hide").siblings().addClass("hide");
// });
/// JS 实现 //
//
// var tabs = document.getElementsByClassName("title")[0].children;
// var pages = document.getElementsByClassName("content")[0].children;
//
// for (var i=0; i<tabs.length; i++) {
// //为每个标题都绑定函数
// tabs[i].onclick = function() {
// //每次执行函数都要遍历所有标题,判断为当前点击标题,增加"activate",否则移除"activate"
// for(var j=0; j<tabs.length; j++) {
// if (tabs[j]==this) {
// tabs[j].classList.add("activate");
// relateId = this.getAttribute("relate"); //当前点击元素relate属性对应的id值
//
// } else {
// tabs[j].classList.remove("activate")
// }
// }
//
// //根据自定义的relate属性,将标题和页面关联起来
// var relateId = this.getAttribute("relate");
// //当前激活标签relate属性对应的id,通过它,找到对应的显示页面
// var current_page = document.getElementById(relateId);
// for (var k=0; k<pages.length; k++) {
// if (pages[k] == current_page) {
// pages[k].classList.remove("hide");
// } else {
// pages[k].classList.add("hide");
// }
// }
// };
// }
</script>
</html>