Question

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

默认示例包含一个带有两个链接的导航栏。该示例将第一个链接设置为活动链接。

        <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，当我点击链接时，更改活动链接的最佳方法是什么？

我是否需要将某些javascript添加到链接本身？

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

如何使用bootstrap更改活动的nav链接

1 个答案: