使用 JavaScript 加載頁面后，如何在用戶單擊時在特定 li 上添加活動類

Question

我有一個包含某些項目的菜單，我希望當用戶點擊任何 li 時，只有它的類成為活動類。 我有如下菜單項：

$(document).ready(function () {
    $(function () {
        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
        alert(pgurl);
        $(".nav li a").each(function () {
            if ($(this).attr("href") == pgurl || $(this).attr("href") == '') {
                $(this).addClass("active");
            }
        })
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-9">
    <nav class="nav-holder">
        <div class="nav-footer">
            <ul class="nav" id="navclk">
                <li class="active">
                    <a href="Home">Home </a>
                </li>
                <li class="">
                    <a href="About-Us">About </a>
                </li>
                <li class="">
                    <a href="Car-Rentals">Car Rentals </a>
                </li>

                <li class="">
                    <a href="Wedding-Cars">Wedding Cars </a>
                </li>
                <li class="">
                    <a href="Tempo-Travellers">Tempo Travellers </a>
                </li>
                <li class="">
                    <a href="Tour-Package">Tour Package </a>
                </li>
                <li class="">
                    <a href="Coach">Coach </a>
                </li>

                <li class="has-submenu">
                    <a href="javascript:void(0);">Places</a>
                    <ul class="submenu">
                        <li><a href="Bhubaneswar">Bhubaneswar</a></li>
                        <li><a href="Puri">Puri</a></li>
                        <li><a href="Konark">Konark</a></li>
                        <li><a href="Chilaka">Chilika</a></li>
                        <li><a href="Gopalpur">Gopalpur</a></li>
                        <li><a href="Cuttack">Cuttack</a></li>
                        <li><a href="Bhitarkanika">Bhitar Kanika</a></li>
                        <li><a href="Daringbadi">Daringbadi</a></li>
                        <li><a href="Jajpur">Jajpur</a></li>

                    </ul>
                </li>

                <li><a href="Contact-Us">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

它不適用於下拉菜單，而與所有其他沒有下拉項目的菜單完美配合。 如何更改它也適用於具有項目下拉列表的菜單項的代碼？ 我也在我的頁面上使用更新面板。

Answer 1

這可以通過以下代碼完成

CSS

.active {
    /* your active CSS */
}

html

<ul>
    <li onclick="activeMe(this)">1</li>
    <li onclick="activeMe(this)">2</li>
    <li onclick="activeMe(this)">3</li>
    <li onclick="activeMe(this)">4</li>
</ul>

JavaScript

function activeMe(li) {
    console.log(li.setAttribute("class", "active"));
}
``

Answer 2

正確答案！

  <!--Menu Active-->
    <script type="text/javascript">
        $(document).ready(function () {
            $('.nav li').removeClass('active');
            $(function () {
                var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
                $(".nav li a").each(function () {
                    if ($(this).attr("href") == pgurl) {
                        $(this).closest('li').addClass("active");
                    }
                })
            });
        });
    </script>
    <!--Menu Active-->