我如何在引导程序 <nav> 中为当前页面添加下划线

Question

我有以下定义我们的主菜单导航的引导代码：-

<div class="col-xl-9 col-lg-9">
                                <div class="main-menu  d-none d-lg-block">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="/">home</a></li>
                                            <li><a href="/home/FAQ">FAQ</a></li>
                                            <li><a href="/home/contact/">Contact</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

但如果可能，我需要使用引导程序为当前页面添加下划线？

Answer 1

将一个类放在活动的类中，并在 css 中为该类添加下划线 像这样：

<li class="active"><a href="/">home</a></li>

css:

.active{
    border-bottom: xxxx;
    border-color:xxxx;
    border-style:xxx;
    }

Answer 2

为此，您需要一些 JavaScript。基本上，您需要动态添加一个类，例如active 到您的活动 <li> 元素，然后向此类添加一些样式。详情请查看this article。