Блог

Как сделать активную панель навигации на основе дочерней страницы на ASP.NET . Вот страница макета:

 <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow w3-red">
        <div class="container" id="topheader">
            <img src="~/Images/menubar-logo-white.png" width="136" height="46" />
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="myDIV">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="target nav-link text-white active" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link text-white" asp-area="" asp-page="/About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link text-white" asp-area="" asp-page="/Services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link text-white" asp-area="" asp-page="/Contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
 

Я пытался использовать javascript, но не смог работать. Вот javascript:

 <script type="text/javascript" >
    $(document).on('click', 'ul li', function () {
        $(this).addClass('active').siblings().removeClass('active')
    });

</script>
 

Css будет потерян при перезагрузке страницы. Вы можете сохранить URL-адрес страницы в sessionStorage при нажатии на привязку, а затем добавлять к нему класс css каждый раз при перезагрузке страницы.

 <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow w3-red">
        <div class="container" id="topheader">

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="myDIV">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="target nav-link active" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link" asp-area="" asp-page="/About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link" asp-area="" asp-page="/Services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link" asp-area="" asp-page="/Contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<script type="text/javascript">
    $(function () {
        var page = sessionStorage.getItem('page');
        var navbar = document.querySelectorAll('li');
        if (page == null) {
            $(navbar[0]).addClass('active');
        } else {
            navbar.forEach((item, index) => {
                if (item.children[0].href == page) {
                    $(item).addClass('active').siblings().removeClass('active');
                }
            });
        }
    })

    $(document).on('click', 'ul li', function () {
        var x = this.children[0].href;
        sessionStorage.setItem('page', x);
    });
</script>