我如何在我的引导程序中强调当前页面<nav></nav>

Question

I have the following bootstrap code which define our main menu navigation:-

<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>

but i need to make the current page underline using bootstrap if possible?

Answer 1

Put a class in the one that is active and in css give the underline to the class Like this:

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

css:

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

Answer 2

You need some JavaScript for this. Basically, you need to add a class dynamically, eg active to your active <li> element and then add some styles to this class. Check this article for further details.