I have created tabs using Html for two files one is Fontend other end is backend(data stored in mySql database) that means whenever users puts the data in the frontend and can see data in other tab Now I want to create tabs using JavaScript, How can this do? I searched but i didn't find.Please Help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 3px solid #ccc;
background-color: #f1f1f1;
tab-size: 6;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
ul {
list-style-type: none;
margin: 50px;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 15px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="students2.html">Students Details Page FronEnd</a></li>
<li><a href="student_getdata.html">Students Details BackEnd</a></li>
</ul>
</div>
<div id="content"></div>
<script>
$(function() {
$("#links > ul li a").click(function(e) {
e.preventDefault(); //so the browser doesn't follow the link
$("#content").load(this.href, function() {
// alert("loaded");
});
});
});
</script>
</body>
</html>