Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How to handle active class for navigation links with query parameters?#619

Unanswered
ghimawan0 asked this question inQ&A
Discussion options

Hi,

Currently, the active class in the navigation menu is added automatically when the URL in the web browser matches the href value in the tag.
For example, if the URL ishttp://localhost/users and the link is<a href="/users">, the active class is automatically applied, resulting in:<a href="/users">.

However, now I have navigation items like these:

<a href="/users?status=available">User Available</a><a href="/users?status=onleave">User On Leave</a>

How can I change the behavior so that the active class is applied based on the full URL, including query parameters?

Thank you!

You must be logged in to vote

Replies: 3 comments

Comment options

I found the solution. Put below code before the</body> tag:

<script>    document.addEventListener("DOMContentLoaded", function () {        setTimeout(function () {            const currentUrl = window.location.pathname + window.location.search;            const navLinks = document.querySelectorAll(".nav-link");            // Remove all existing active classes            navLinks.forEach(function (link) {                link.classList.remove("active");            });            // Add active only to exact URL match            navLinks.forEach(function (link) {                const href = link.getAttribute("href");                if (href === currentUrl) {                    link.classList.add("active");                }            });        }, 160); // Delay in milliseconds, can increase to 200 if needed    });</script>

Thanks.

You must be logged in to vote
0 replies
Comment options

You can adddata-coreui-active-links-exact="false" to.sidebar-nav

You must be logged in to vote
0 replies
Comment options

Thanks@mrholek , I already add like this:<ul data-coreui="navigation" data-simplebar="" data-coreui-active-links-exact="false"> but no luck.

Could you show me the documentation for that, because when I go tohttps://coreui.io/bootstrap/docs I could not find information about it?

You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@ghimawan0@mrholek

[8]ページ先頭

©2009-2025 Movatter.jp