我主要用CSS制作这个选项卡,但我使用CMS动态构建它,在这种情况下,CSS不足以隐藏/显示所有元素,所以我做了一个JS。
它可以很好地显示选定的内容选项卡,但它不会隐藏当前内容来显示新内容,所以它只是将新选择的内容添加到已存在的内容下
请随时运行代码片段,看看它是如何工作的,我不知道我是不是把它弄得太复杂了,但任何建议和帮助都将非常受欢迎。
谢谢!
/*this code is to identify the checked tab and display the content*/
var getAllDataInput = document.querySelectorAll('[data-input]');
for (let i = 0, len = getAllDataInput.length; i < len; i++) {
let getSingleDataInput = getAllDataInput[i];
let tabSelected = getAllDataInput[i].defaultChecked;
if (tabSelected === true) {
var DataInputValue = getSingleDataInput.dataset.input;
var findDataSetMatch = document.querySelector('[data-section="' + DataInputValue + '"]');
findDataSetMatch.style.display = "block";
}
}
/*this is the function that is called on click, it will find the Tab the related Content and display it */
function hideTab(tabNumber) {
let lastSelected = null;
let checkTab = document.querySelector('[data-input="' + tabNumber + '"]');
let contentTab = document.querySelector('[data-section="' + tabNumber + '"]');
if (checkTab.checked === true) {
contentTab.style.display = "block";
}
/*If another tab is selected I need to hide the current content and display the new one!*/
}
.tabsWrapper {
margin: 5rem 1rem;
display: inline-block;
width: 100%;
}
.tab-content {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tab-title {
display: none;
}
.tab-label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.tab-label:hover {
color: #888;
cursor: pointer;
}
.tab-title:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="tabsWrapper">
/*FIRST TABS*/
<input id="tab11" type="radio" name="tabs1" class="tab-title" data-input="11" onClick="hideTab(11)" checked>
<label for="tab11" class="tab-label">Title A</label>
<input id="tab12" type="radio" name="tabs1" class="tab-title" data-input="12" onClick="hideTab(12)">
<label for="tab12" class="tab-label">Title B</label>
/*FIRST CONTENT*/
<section id="ctab11" class="tab-content" data-section="11">
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section id="ctab12" class="tab-content" data-section="12">
<p>Invidunt menandri duo at, at everti prompta eos.</p>
</section>
</div>
<div class="tabsWrapper">
/*SECOND TABS*/
<input id="tab21" type="radio" name="tabs2" class="tab-title" data-input="21" onClick="hideTab(21)" checked>
<label for="tab21" class="tab-label">Title A</label>
<input id="tab22" type="radio" name="tabs2" class="tab-title" data-input="22" onClick="hideTab(22)">
<label for="tab22" class="tab-label">Title B</label>
/*SECOND CONTENT*/
<section id="ctab21" class="tab-content" data-section="21">
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section id="ctab22" class="tab-content" data-section="22">
<p>Invidunt menandri duo at, at everti prompta eos.</p>
</section>
</div>
</body>
</html>
https://stackoverflow.com/questions/51216512
复制相似问题