admin管理员组文章数量:1435822
I've been trying to create tabs in JavaScript. When clicking on a new tab the active class should be applied to it as well as its associated panel content should be displayed. However, the active class isn't being applied when another tab is clicked and the panels are not changing either, they are just stacking on top of each other.
const tabs = document.querySelector(".tabs");
const active = document.querySelector(".active");
const panel = document.querySelector(".panel");
function onTabClick(event) {
// deactivate existing active tabs and panel
active.classList.remove('.active');
for (let i = 0; i < panel.length; i++) {
panel[i].style.display = "none";
}
// activate new tabs and panel
event.target.classList.add('.active');
let classString = event.target.innerHTML;
console.log(classString);
document.getElementsByClassName(classString)[0].style.display = "block";
}
tabs.addEventListener('click', onTabClick, false);.tabs {
display: flex;
justify-content: space-around;
margin: 20px 2px 40px 2px;
height: 40px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tabs>* {
width: 100%;
color: dimgray;
height: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.tabs>*:hover:not(.active) {
background-color: rgb(220, 220, 220);
}
.tabs>.active {
color: white;
background-color: #4CAF50;
}
.panel {
display: none;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tabs">
<div class="tab active">List</div>
<div class="tab">Grid</div>
<div class="tab">something</div>
</div>
<div class="Lists panel" style='display:block'>
panel 1 text
</div>
<div class="Grid panel">
panel 2 text
</div>
<div class="something panel">
panel 3 text
</div>
</body>
</html>I've been trying to create tabs in JavaScript. When clicking on a new tab the active class should be applied to it as well as its associated panel content should be displayed. However, the active class isn't being applied when another tab is clicked and the panels are not changing either, they are just stacking on top of each other.
const tabs = document.querySelector(".tabs");
const active = document.querySelector(".active");
const panel = document.querySelector(".panel");
function onTabClick(event) {
// deactivate existing active tabs and panel
active.classList.remove('.active');
for (let i = 0; i < panel.length; i++) {
panel[i].style.display = "none";
}
// activate new tabs and panel
event.target.classList.add('.active');
let classString = event.target.innerHTML;
console.log(classString);
document.getElementsByClassName(classString)[0].style.display = "block";
}
tabs.addEventListener('click', onTabClick, false);.tabs {
display: flex;
justify-content: space-around;
margin: 20px 2px 40px 2px;
height: 40px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tabs>* {
width: 100%;
color: dimgray;
height: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.tabs>*:hover:not(.active) {
background-color: rgb(220, 220, 220);
}
.tabs>.active {
color: white;
background-color: #4CAF50;
}
.panel {
display: none;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tabs">
<div class="tab active">List</div>
<div class="tab">Grid</div>
<div class="tab">something</div>
</div>
<div class="Lists panel" style='display:block'>
panel 1 text
</div>
<div class="Grid panel">
panel 2 text
</div>
<div class="something panel">
panel 3 text
</div>
</body>
</html>3 Answers
Reset to default 3In your JavaScript when getting all the elements of a specific class, document.querySelecto(".className") only grabs the first element with the given class. To get all the elements, you'll have to use document.querySelectorAll(".className").
Then when adding or removing a class from an element, you don't put the point before the class name. So instead of tab[i].classList.remove(".active");, it should be tab[i].classList.remove("active");.
Also, instead of explicity hiding the panel elements, I used an active class which will be applied to panel associated tab.
Finally, you should not use the tab text as the class name for the respective panel. This would be problematic when you have multiple words in the tab text. What I did was use the data attribute of the tabs to specify the relative class of the panel and place all the panels in a div element .panels. Now you can put what ever text you want in the tabs and using the data-target attribute, place the class name for the panel.
const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".panel");
function onTabClick(event) {
// deactivate existing active tabs and panel
for (let i = 0; i < tab.length; i++) {
tab[i].classList.remove("active");
}
for (let i = 0; i < panel.length; i++) {
panel[i].classList.remove("active");
}
// activate new tabs and panel
event.target.classList.add('active');
let classString = event.target.getAttribute('data-target');
console.log(classString);
document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}
for (let i = 0; i < tab.length; i++) {
tab[i].addEventListener('click', onTabClick, false);
}.tabs {
display: flex;
justify-content: space-around;
margin: 20px 2px 40px 2px;
height: 40px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tabs>* {
width: 100%;
color: dimgray;
height: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.tabs>*:hover:not(.active) {
background-color: rgb(220, 220, 220);
}
.tabs>.active {
color: white;
background-color: #4CAF50;
}
.panel {
display: none;
}
.panel.active {
display: block;
}<div class="tabs">
<div class="tab active" data-target="Lists">Lists</div>
<div class="tab" data-target="Grid">Grid</div>
<div class="tab" data-target="Something">Something</div>
</div>
<div id="panels">
<div class="Lists panel active">
panel 1 text
</div>
<div class="Grid panel">
panel 2 text
</div>
<div class="Something panel">
panel 3 text
</div>
</div>
let overlayTabs = document.querySelectorAll(".left-tab-overlay li")
let overlayTabId = document.querySelectorAll('.main-nav-tab')
let tabContent = document.querySelectorAll(".panel-collapse")
overlayTabs.forEach(data => {
data.parentNode.firstChild.classList.add("active")
data.addEventListener('click', function(e) {
const id = e.currentTarget.dataset.id
if (id) {
overlayTabId.forEach(data => {
data.classList.remove("active")
})
e.target.classList.add("active");
tabContent.forEach(data => {
data.classList.remove("in")
});
const element = document.getElementById(id);
element.classList.add("in")
}
});
});Yoou can use foreach loops with tabs to dynamically toggle using active class
<!--loop here in html for tabs-->
{% for tabsitem in item.tabs %}
<li data-id="{{tabsitem.id}}" class="main-nav-tab"><a data-toggle="tab">{{tabsitem.text}}</a></li>
{% endfor %}
<!--loop here in html for tabs bootstrap tab ref-->
<div class="tab-content">
{% for item in itemblock %}
<div class="tab-pane">
<div id="{{item.id}}" class="panel-collapse collapse in">
my content
</div>
</div>
{% endfor %}I noticed this problem and thought of solving it once and for all for as many people as I can. I made a library for addition, manipulation, customisation and removal of tabs in JavaScript. The library is just a single file that has everything you need. I don't want to make the response long and boring, therefore, in order to view the documentation, after referencing the file, just call showDocumentation() and in order to view a list of functions and their required arguments, call showListFunctions(). THE DOCUMENTATION IS ONLY TWELVE SHORT STEPS and it will enable you to know the suitable tab types for you as well as other style customisation functions. I will now proceed to provide an example of adding swipable tabs to a container. There are methods in the library for addition of other types of tabs and I provided the information both in the list of functions and documentation. Please note that for the functions to work as expected, THE DOCUMENT MUST AT LEAST HAVE HEAD AND BODY. The example for swipable tabs is as follows:
let firstTab = document.createElement("div");
firstTab.innerHTML = "FIRST TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
firstTab.style.textAlign = "center";
firstTab.style.color="white";
let secondTab = document.createElement("div");
secondTab.innerHTML = "SECOND TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
secondTab.style.textAlign = "center";
secondTab.style.color="white";
let thirdTab = document.createElement("div");
thirdTab.innerHTML = "THIRD TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
thirdTab.style.textAlign = "center";
thirdTab.style.color="white";
let fourthTab = document.createElement("div");
fourthTab.innerHTML = "FOURTH TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
fourthTab.style.textAlign = "center";
fourthTab.style.color="white";
let fifthTab = document.createElement("div");
fifthTab.innerHTML = "FIFTH TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
fifthTab.style.textAlign = "center";
fifthTab.style.color="white";
let sixthTab = document.createElement("div");
sixthTab.innerHTML = "SIXTH TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
sixthTab.style.textAlign = "center";
sixthTab.style.color="white";
let tabsObjectsArray = [firstTab, secondTab, thirdTab, fourthTab, fifthTab, sixthTab];
let tabNamesArray = ["TAB_ONE", "TAB_TWO", "TAB_THREE", "TAB_FOUR", "TAB_FIVE", "TAB_SIX"]
addSwipableTabs("sampleContainerElement", tabsObjectsArray, tabNamesArray);#sampleContainerElement{
display: table;
height: 50vh;
width: 50vw;
margin: 2vh auto;
border: solid 1px gold;
border-radius: 2vh;
background-color: black;
}<!--Referencing the script first-->
<script type="text/javascript" src="https://anville95work.github.io/scripts/JavaScriptTabsLibrary.js"></script>
<style>
</style>
<div id="sampleContainerElement">
<!--This is the container view. Container view must be empty and must not be modified directly-->
</div>本文标签： htmlHow to create tabs in javascriptStack Overflow
版权声明：本文标题：html - How to create tabs in javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745638269a2667694.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论