js easy tab
achieve effect
Click an option on the left, and the corresponding content will be displayed on the right.
Implementation ideas
CSS
1. Left and right layout, set the tabs to float to the left, and the content to float to the right. In order to prevent the parent element card from collapsing when the child element is set to be floating and unmarked, you can set the parent element overflow: hidden;and use BFCthe mechanism to eliminate the impact of floating.
For details on the BFC mechanism, see: What is the BFC mechanism, how to trigger BFC (eliminate the collapse of the parent element caused by floating, vertical margin overlap, nested block-level element parent element margin collapse)
2. In the content display area on the right, the text and pictures are packaged in one <div></div>package, which display: none;is set to not load by default. Then define an activation class, set it display: block;, and load the div in the activated state.
JavaScript
1. Use event delegation to add listening events to the parent element onclickto determine which tab the user clicks.
For event delegation, please refer to: Native js realizes the display effect of Taobao products on the web page, and the mouse moves into the small picture to display the corresponding large picture (event delegation, event propagation, bubbling mechanism) [including complete code] (including event delegation explanation)
2. Each click After the event occurs, set the card setting class corresponding to the clicked tab as the active class dom对象.className="激活类", and set the card setting corresponding to the unclicked optiondisplay: none;
tabs[i].children[0].className = "tab-active";
tab_contents[i].className = "tab-content-active";
full code
<!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>