帶有 id 的 href 重定向到頁面並將 class 更改為活動

Question

我有兩個頁面，一個是主頁，另一個是聯系我們頁面聯系我們頁面有 4 個菜單，其中第一個處於活動狀態。 我希望當我單擊主頁按鈕時，它會轉到聯系我們頁面並激活第二個選項。

主頁按鈕代碼：

<div class="buttons">
<a class="btn btn-danger" href="javascript:void(0)" data-toggle="modal" data-target="#exampleModalLong">Book A Service</a>
</div>

聯系我們菜單代碼：

<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link mb-2 p-3 shadow active" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true" data-kmt="1">
                        <i class="fa fa-calendar-minus-o mr-2"></i>
                        <span class="text-uppercase">Book a Service</span></a>

                    <a class="nav-link mb-2 p-3 shadow" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false" data-kmt="1">
                        <i class="fa fa-car" aria-hidden="true"></i>
                        <span class=" text-uppercase">Guest Book</span></a>

                    <a class="nav-link mb-2 p-3 shadow" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false" data-kmt="1">
                        <i class="fa fa-question" aria-hidden="true"></i>
                        <span class="text-uppercase">Buy a Car</span></a>

                    <a class="nav-link mb-2 p-3 shadow" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" data-kmt="1">
                        <i class="fa fa-check mr-2"></i>
                        <span class="text-uppercase">Exchange your Car</span></a>
                </div>

Answer 1

這種方法更長，但它是有效的

        <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link mb-2 p-3 shadow active book_service" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true" data-kmt="1">
                <i class="fa fa-calendar-minus-o mr-2"></i>
                <span class="text-uppercase">Book a Service</span></a>
            <a class="nav-link mb-2 p-3 shadow GuestBook" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false" data-kmt="1">
                <i class="fa fa-car" aria-hidden="true"></i>
                <span class=" text-uppercase">Guest Book</span></a>
            <a class="nav-link mb-2 p-3 shadow BuyAcar" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false" data-kmt="1">
                <i class="fa fa-question" aria-hidden="true"></i>
                <span class="text-uppercase">Buy a Car</span></a>
            <a class="nav-link mb-2 p-3 shadow Ex_Car" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" data-kmt="1">
                <i class="fa fa-check mr-2"></i>
                <span class="text-uppercase">Exchange your Car</span></a>
        </div>


                   // add Book on Service page

                        $(document).ready(function()
                        {
                             $('.book_service').addClass('active');
                        });

                    // add on Guest Book page

                        $(document).ready(function()
                        {
                             $('.GuestBook').addClass('active');
                        });

                    // Buy a Car page

                        $(document).ready(function()
                        {
                             $('.BuyAcar').addClass('active');
                        });