带有 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');
                        });