To create and add a new tab element in a web UI, you can use HTML, CSS, and JavaScript. Here's an example of how to do it:
HTML:
<div class="tabs">
<button class="tab-link" id="tab1">Tab 1</button>
<button class="tab-link" id="tab2">Tab 2</button>
<button class="tab-link" id="tab3">Tab 3</button>
<div class="tab-content" id="content1">
<p>Content for Tab 1</p>
</div>
<div class="tab-content" id="content2">
<p>Content for Tab 2</p>
</div>
<div class="tab-content" id="content3">
<p>Content for Tab 3</p>
</div>
</div>
CSS:
.tabs {
display: flex;
flex-direction: row;
}
.tab-link {
background-color: #ddd;
color: black;
padding: 14px 16px;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
width: 100px;
text-align: center;
}
.tab-link:hover {
background-color: #ccc;
}
.tab-content {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
JavaScript:
var tabs = document.querySelectorAll(".tab-link");
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
var tabContent = document.getElementById(this.id + "-content");
var tabContents = document.querySelectorAll(".tab-content");
for (var j = 0; j < tabContents.length; j++) {
tabContents[j].style.display = "none";
}
tabContent.style.display = "block";
});
}
In this example, we have three buttons that act as tabs, and three content areas that will be shown or hidden based on which tab is selected. The CSS styles the appearance of the tabs and content, and the JavaScript code implements the functionality to show or hide the content when a tab is clicked.
Note: The above code is just a sample, you can modify it according to your requirements.
