CSS JS选项卡-不隐藏当前内容如果单击另一个选项卡，
CSS JS选项卡-不隐藏当前内容如果单击另一个选项卡，
提问于 2018-07-07 03:17:54
我主要用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>
回答 1
Stack Overflow用户
发布于 2018-07-08 14:07:12
只需将onClick事件添加到input标记，即可将其连接到js函数。然后编写一个Js函数来更改您想要更改的标记的样式属性。
<style>
#ctab21 {
display: block;
color: blue;
}
</style>
<body>
<div>Hide text:</div>
<!-- onclick attribute connects hideTab function to input tag -->
<input id="tab21" type="checkbox" onClick="hideTab()">
<section>
<!-- hidden text to be displayed -->
<p id="ctab21">This text will become hidden</p>
</section>
</body>
<script>
function hideTab() {
// get the checkbox; id ="tab21"
let checkBox = document.getElementById("tab21");
// get the p tag; id ="ctab21"
let text = document.getElementById("ctab21");
// If the checkbox is checked, hide the text
if (checkBox.checked == false) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>参考：https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51216512
复制相关文章
相似问题