Add Class To Element

Hi ... i have sidebar with menu like so: Settings Main Settings Countries List Cities List Nationality List

                <ul class="menu-inner py-1">

                    <!-- Menu -->
                    <li class="menu-item active open">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons ti ti-settings"></i>
                            <div>Settings</div>
                        </a>
                        <ul class="menu-sub">

                            <li class="menu-item active">
                                <a href="#" class="menu-link">
                                    <div>Main Settings</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="{{ route('Countries.index') }}" class="menu-link">
                                    <div>Countries List</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="#" class="menu-link">
                                    <div>Cities List</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="#" class="menu-link">
                                    <div>Nationalities List</div>
                                </a>
                            </li>

                        </ul>
                    </li>
                </ul>

i have tried this code and work with child only and it didnt do to route i want

$(document).ready(function () {
    $("li a").click(function (e) {
        $("li.active").removeClass("active");

        var $parent = $(this).parent();
        $parent.addClass("active");
        e.preventDefault();
    });
});

Any Help on This Kind Regards

hupp

2 years ago

Level 11

@khalid475 try this modified version. it will make active to parent and its current clicked child. first it remove all active and after that find the closest parent and make both active.

    $(document).ready(function () {
        $("li a").click(function (e) {
            var $parent = $(this).closest("li"); // Find the closest parent li element

            // Remove the "active" class from all li elements in the menu
            $("li.active").removeClass("active");

            // Add the "active" class to the clicked li element and its parent li element
            $parent.addClass("active");
            $parent.parents("li").addClass("active");
            e.preventDefault();
        });
    });

Let me know your feedback.

Tray2

2 years ago

Level 73

I would keep it simple

let el = document.querySelector('#my-element');
el.classList.add('my-css-class');

or maybe even inline it

document.querySelector('#my-element').classList.add('my-css-class');

But I usually use a few helpers

function getElement(selector) {
	return document.querySelector(selector);
}

function addClassTo(selector, cssClass) {
	getElement(selector).classList.add(cssClass);
}

addClassTo('#my-element', 'my-class');

aniruddhpurohit

2 years ago

Level 1

If it is blade file, you can easily manage like following

class="class1 class2 {{ request()->segment(1) == 'home' ? 'active' : '' }}"

class="class1 class2 {{ request()->path() == '/user/profile' ? 'active' : '' }}"

Please or to participate in this conversation.