Hi,
I have a code, it works on html editor. But if I put it on datapage the active selection not working.
Any help ?
Regards,
<style>
ul {
list-style-type: none !important;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
nav {
background-color: green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item.active {
background-color: red;
}
</style>
<nav>
<ul>
<li class="nav-item" id="Create">
<a href="#">Create</a>
</li>
<li class="nav-item" id="Monitor">
<a href="#">Monitor</a>
</li>
<li class="nav-item" id="Response">
<a href="#">Response</a>
</li>
<li class="nav-item" id="MR Menu">
<a href="#">MR Menu</a>
</li>
<li class="nav-item" id="Logout">
<a href="#">Logout</a>
</li>
</ul>
</nav>
<Script>
document.addEventListener('DOMContentLoaded',
function () {
const navItems = document
.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click',
function () {
navItems.forEach(navItem => navItem
.classList.remove('active'));
this.classList.add('active');
});
});
});
</Script>