Bootstrap 3 - 导航栏活动状态的类

Question

Bootstrap 3 - 导航栏活动状态的类

twitter-bootstraptwitter-bootstrap-3navbar

3

$("#houses a:contains('Houses')").parent().addClass('active');

<body id="houses">
  <li><a href="houses.php">Houses</a></li> 
</body>

当我点击导航(houses)时，在检查元素中它添加了类active，但它没有改变导航的颜色。添加了类但没有效果。

我一直在尝试按照教程操作。在教程中看起来很好，但对我不起作用。

- user2831179

1

发布你的代码，最好使用JSfiddle.net来创建一个fiddle。 - absqueued

这是链接，先生：http://jsfiddle.net/Vnsrm/ - user2831179

没有点击事件。也许你需要更详细地解释一下你想要什么。 - absqueued

我的问题是它将活动类添加到li中，但没有效果。颜色与没有活动类的其他li相同。 - user2831179

2个回答

2

<script type="text/javascript">
    jQuery(document).ready(function($){
        var url = window.location.href;
        $('.nav a[href="'+url+'"]').parent().addClass('active');
    });
</script>

- user3254496

4

欢迎来到 StackOverflow。好的回答应包含源代码及简短解释，以帮助其他用户。请考虑添加几行文字，解释您的解决方案和其有何用处。 - grebneke

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- absqueued · Accepted Answer

明白了，

您的 .navbar div 缺少导航栏主题类。将类 .navbar-default 添加到 .navbar 上就可以了。

更新后的 HTML

<section class="navbar navbar-default">
                <ul class="nav navbar-nav">
                    <li><a href="index.php">New Listings</a>
                    </li>
                    <li><a href="homes.php">Houses</a>
                    </li>
                    <li><a href="land.php">Land</a>
                    </li>
                    <li><a href="mortgagecalc.php">Mortgage Calculator</a>
                    </li>
                    <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">For Pros<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li> <a tabindex="-1" href="#">Register for Caraga Homes</a>
                            </li>
                            <li class="divider"></li>
                            <li> <a tabindex="-1" href="#">Post a listing for free</a>
                            </li>
                        </ul>
                        <!-- drop down Menu -->
                    </li>
                </ul>
            </section>

所有工作都已完成。演示：http://jsfiddle.net/shekhardesigner/r2qaZ/