Active Navigation Bar Not Working

[IVAN88]

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>

[CoopperBackpack]

Hello @IVAN88,

In the script please use DataPageReady instead of DOMContentLoaded.

Also, it is recommended to add scripts to the DataPage Footer.

<script>
document.addEventListener('DataPageReady', 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>

[telly]

Hi @IVAN88,

I hope this helps.

 

[IVAN88]

On 6/21/2024 at 7:32 PM, CoopperBackpack said:

Hello @IVAN88,

In the script please use DataPageReady instead of DOMContentLoaded.

Also, it is recommended to add scripts to the DataPage Footer.

<script>
document.addEventListener('DataPageReady', 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>

@CoopperBackpack I've tried this but still nothing change.

Rgds,

[CoopperBackpack]

Hello @IVAN88,

It works on my test DataPage. 
Could you share the URL of the test DataPage where the code doesn`t work?