如何将活动导航 link 更改为 bootstrap

Question

我一直在使用 http://www.layoutit.com/ 快速创建 UI 和 bootstrap 3.

默认示例有一个带有两个 link 的导航栏。该示例将第一个 link 设置为活动状态。

        <nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Link</a>
                    </li>
                    <li>
                        <a href="#">Link</a>
                    </li>
                </ul>                       
            </div>              
        </nav>

对于 bootstrap，当我单击 link 时更改活动 link 的最佳方法是什么？

我需要添加一些 javascript 到 link 本身吗？

Answer 1

如果您的网站有不同的 HTML 页面，而您只是在使用 HTML CSS Bootstrap..，那么您必须执行以下操作：

page1.html

<nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="page1.html">Page 1</a>
                    </li>
                    <li>
                        <a href="page2.html">Page 2</a>
                    </li>
                </ul>                       
            </div>              
        </nav>

page2.html

<nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="page1.html">Page 1</a>
                    </li>
                    <li class="active">
                        <a href="page2.html">Page 2</a>
                    </li>
                </ul>                       
            </div>              
        </nav>

更新

对于动态页面，正如您提到的您正在使用 Ruby on Rails，此解决方案可能有效：Dynamically add active class to bootstrap li in Rails

如何将活动导航 link 更改为 bootstrap

How to change active nav link with bootstrap

hyperlink

navbar

twitter-bootstrap