【问题标题】:How i can underline the current page inside my bootstrap <nav>我如何在引导程序 <nav> 中为当前页面添加下划线
【发布时间】:2020-06-18 14:08:38
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript html jquery css twitter-bootstrap


    【解决方案1】:

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

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

    css:

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

    【讨论】:

    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-12-01
      • 2021-01-01
      • 2015-05-06
      • 2011-06-23
      • 1970-01-01
      • 2015-10-30
      • 2023-04-09
      • 1970-01-01
      相关资源
      最近更新 更多