刷新頁面后如何使我的導航欄保持活動狀態？

Question

我有導航欄下拉菜單，我想讓這個下拉列表在點擊時激活，我的 JavaScript 編碼正在運行，但在頁面刷新時它會消失，如何解決這個問題？？？

我的 JavaScript：

var header = document.getElementById("kt_header_menu");
var menu = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < menu.length; i++) {
    menu[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        if (current.length > 0) {
            current[0].className = current[0].className.replace(" active", "");
        }
        this.className += " active";
    });
}

localStorage.setItem('selectedTab', 'active');
let tabValue = localStorage.getItem('selectedTab');
if(tabValue !== '') {
  $('dropdown-item').addClass(tabValue);
} else {
  tabValue = '';
}

我的 html 導航欄：

<ul class="menu-nav ">
                    <li class="menu-item dropdown ">
                        <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{__('navbar.product')}}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'FMS']) }}">{{__('Fleet
                                Management System')}}</a>
                            <a class="dropdown-item "
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TMS']) }}">{{__('Tranportation
                                Management System')}}</a>
                            <a class="dropdown-item"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TAS']) }}">{{__('Truck
                                Appointment System')}}</a>
                            <a class="dropdown-item"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'IOS']) }}">{{__('Integration
                                to other system')}}</a>
                        </div>
                    </li>
                </ul>

Answer 1

現在我知道答案只需在 class 和 isset 中添加 active

                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item {{(isset($slug)?(($slug=='FMS')?'active':''):'')}}"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'FMS']) }}">{{__('Fleet
                                Management System')}}</a>
                            <a class="dropdown-item {{(isset($slug)?(($slug=='TMS')?'active':''):'')}}"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TMS']) }}">{{__('Tranportation
                                Management System')}}</a>
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TAS']) }}">{{__('Truck
                                Appointment System')}}</a>
                            <a class="dropdown-item {{(isset($slug)?(($slug=='IOS')?'active':''):'')}}"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'IOS']) }}">{{__('Integration
                                to other system')}}</a>
                        </div>