js简易选项卡
实现效果
点击左侧某一选项，右侧展示对应的内容。
实现思路
CSS
1、左右布局，设置选项卡左浮动，内容右浮动。为防止当子元素设置浮动脱标后，父元素卡片塌陷，可以设置父元素overflow: hidden;，利用BFC机制消除浮动带来的影响。
BFC机制详见：什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
2、右侧内容展示区，文字和图片用一个<div></div>包裹，设置display: none;，即默认不加载。再定义一个激活类，设置display: block;，激活状态下加载div。
JavaScript
1、利用事件委托，为父元素添加监听事件onclick，判断用户点击的是哪个选项卡。
事件委托可参考：原生js实现网页淘宝产品展示效果，鼠标移入小图展示对应大图（事件委托、事件传播、冒泡机制）【含完整代码】 （内含事件委托讲解）
2、每次点击事件发生后，将点击的选项卡对应的卡片设置类为激活类dom对象.className="激活类"，而没有被点击的选项对应的卡片设置display: none;
tabs[i].children[0].className = "tab-active";
tab_contents[i].className = "tab-content-active";
完整代码
<!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>js简易选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 卡片整体区域 */
.tabs-vertical {
font: bold 15px sans-serif; /*字体*/
background-color: #f7f7f7;
/* 阴影 */
/* box-shadow: 0 0 22px #e2e2e2 inset, 2px 2px 3px #e8e8e8; */
/* 边框 */
border: 1px solid #cecece;
/* 水平居中，上下外边距30px */
margin: 30px auto 30px;
/* 宽度 */
width: 580px;
/* 内容居中 */
/* text-align: center; */
/* 圆角边框 */
border-radius: 5px;
/* BFC块级格式化上下文，避免因子元素浮动而造成父元素塌陷 */
overflow: hidden;
}
/* 左侧垂直选项列 */
.tabs-vertical ul {
/* background-color: aqua; */
float: left; /* 左浮动 */
/* 去除列表自带圆点*/
list-style: none;
}
/* 左侧选项卡选项里的文字 */
.tabs-vertical ul li a {
/* 设置a为块级元素，支持padding */
display: block;
/* 消除下划线 */
text-decoration: none;
color: #656a6d;
/* 固定宽度 */
width: 100px;
box-sizing: border-box;
border: 1px solid transparent;
/* 消除左右边框 */
border-right: 0;
border-left: 0;
padding: 16px 20px 16px 20px;
}
/* 激活状态的选项卡样式 */
.tabs-vertical ul li a.tab-active {
border-color: #dddddd;
background-color: #ffffff;
box-shadow: 0px 2px 0px #efefef;
}
/* 消除第一个选项卡上方边框 */
.tabs-vertical ul li:first-child a {
border-top: 0;
}
/* 右侧内容区 */
.tabs-content-placeholder{
float: right;
width: 480px;
box-sizing: border-box;
padding: 0px 40px 20px 40px;
background-color: #ffffff;
}
.tabs-content-placeholder img{
width: 400px;
}
/* 右侧内容区上方文字 */
.tabs-content-placeholder > div > p{
/* 高度50px，垂直居中 */
height: 50px;
line-height: 50px;
font-weight: normal;
color: #565a5c;
}
/* 名称+图片div默认不加载 */
.tabs-content-placeholder div {
display: none;
}
/* 激活状态下加载 */
.tabs-content-placeholder div.tab-content-active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="tabs-vertical">
<!-- 左侧垂直选项卡 -->
<ul>
<li>
<a class="tab-active" data-index="0" href="#">槐花</a>
</li>
<li>
<a data-index="1" href="#">垂茉莉</a>
</li>
<li>
<a data-index="2" href="#">垂枝樱</a>
</li>
</ul>
<!-- 右侧图片展示区域 -->
<div class="tabs-content-placeholder">
<div class="tab-content-active">
<p>槐花</p>
<img src="img/huaihua.jpg" alt="Industrial Mech" />
</div>
<div >
<p>垂茉莉</p>
<img src="img/chuimoli.jpg" alt="Colosseum" />
</div>
<div>
<p>垂枝樱</p>
<img src="img/chuizhiying.jpg" alt="Sahale Wa" />
</div>
</div>
</div>
</div>
</body>
<script>
// 获取左侧ul列表
var tab = document.querySelector(".tabs-vertical > ul");
// 获取选项卡li数组
var tabs = document.querySelectorAll(".tabs-vertical > ul > li");
// 获取内容区的文字+图片div卡片数组
var tab_contents = document.querySelectorAll(".tabs-content-placeholder > div");
// 给ul添加点击事件，使用事件委托
tab.onclick = function(e){
// 如果用户点击的元素不是ul，那么就是具体的li
if(e.target != e.currentTarget){
// 遍历所有li数组tabs，如果目标是tabs[i]，则将对应的卡片状态激活，否则就设置卡片不加载
for( var i = 0 ; i < tabs.length; i++){
// 用户点击的可能是li也可能是li中的a标签
if(e.target == tabs[i] || e.target == tabs[i].children[0]){
tabs[i].children[0].className = "tab-active";
tab_contents[i].className = "tab-content-active";
}else{
tabs[i].children[0].className = "";
tab_contents[i].className = "";
}
}
}
}
</script>
</html>