js簡単タブ
効果を達成する
左側のオプションをクリックすると、右側に対応するコンテンツが表示されます。
実装のアイデア
CSS
1. 左右のレイアウト。タブが左側にフロートし、コンテンツが右側にフロートするように設定します。子要素がフローティングでマークされていないように設定されている場合に、親要素のカードが折りたたまれるのを防ぐために、親要素を設定し、overflow: hidden;フローティングBFCの影響を排除するメカニズムを使用できます。
BFC メカニズムの詳細については、「BFC メカニズムとは何か、および BFC をトリガーする方法 (フローティング、垂直マージンの重なり、およびネストされたブロック レベル要素の親要素マージンの崩壊によって引き起こされる親要素の崩壊を排除する)」を参照してください。
2. 右側のコンテンツ表示領域では、テキストと画像が 1 つの<div></div>パッケージにパッケージ化されていますが、display: none;デフォルトでは読み込まれないように設定されています。次に、アクティベーション クラスを定義して設定し、display: block;アクティブ化された状態で div をロードします。
JavaScript
1. イベント委任を使用してリスニング イベントを親要素に追加し、onclickユーザーがどのタブをクリックするかを決定します。
イベント委任については、次を参照してください:ネイティブ js は、Web ページ上で Taobao 製品の表示効果を実現し、マウスが小さな画像に移動すると、対応する大きな画像が表示されます (イベント委任、イベント伝播、バブリング メカニズム) [完全なコードを含む] (イベントデリゲーション説明含む)
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>