Question

我在我的项目中添加了bootstrap，用于响应式设计。一切都很好，但它会在标题菜单中激活关于我们，但在页面加载时，HOME仍然有效。但是当页面完全加载时，关于我们会变得活跃。

我从CDN采取了引导程序，链接如下Bootstrap CDN link. 任何人都可以帮助我。

感谢先进。

下面是801到830行的引导代码。

b.prototype.process = function() {
    var a, b = this.$scrollElement.scrollTop() + this.options.offset,
        c = this.getScrollHeight(),
        d = this.options.offset + c - this.$scrollElement.height(),
        e = this.offsets,
        f = this.targets,
        g = this.activeTarget;
    if (this.scrollHeight != c && this.refresh(), b >= d) return g != (a = f[f.length - 1]) && this.activate(a);
    if (g && b < e[0]) return this.activeTarget = null, this.clear();
    for (a = e.length; a--;) g != f[a] && b >= e[a] && (void 0 === e[a + 1] || b < e[a + 1]) && this.activate(f[a])
}, b.prototype.activate = function(b) {
    this.activeTarget = b, this.clear();
    var c = this.selector + '[data-target="' + b + '"],' + this.selector + '[href="' + b + '"]',
        d = a(c).parents("li").addClass("active");
    d.parent(".dropdown-menu").length && (d = d.closest("li.dropdown").addClass("active")),
        d.trigger("activate.bs.scrollspy")
}, b.prototype.clear = function() {
    a(this.selector).parentsUntil(this.options.target, ".active").removeClass("active")
};
var d = a.fn.scrollspy;
a.fn.scrollspy = c, a.fn.scrollspy.Constructor = b, a.fn.scrollspy.noConflict = function() {
    return a.fn.scrollspy = d, this
}, a(window).on("load.bs.scrollspy.data-api", function() {
    a('[data-spy="scroll"]').each(function() {
        var b = a(this);
        c.call(b, b.data())
    })
})

我的html代码如下

<div class="container">
  <div class="navbar-header"><div class="slicknav_menu"><margo aria-haspopup="true" tabindex="0" class="slicknav_btn slicknav_collapsed"><span class="slicknav_menutxt"></span><span class="slicknav_icon slicknav_no-text"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></margo><ul class="slicknav_nav slicknav_hidden" style="display: none;" aria-hidden="true" role="menu">
  <li> <a href="#home" role="menuitem" tabindex="-1">Home</a></li>
  <li> <a href="#about" role="menuitem" tabindex="-1">About Us</a> 
    <!-- <ul class="dropdown">
          <li><a href="#">Profile</a>
          </li>
          <li><a href="#">Press</a>
          </li>
        </ul> --> 
  </li>
  <li> <a href="#" role="menuitem" tabindex="-1">Products </a> 
    <!-- <ul class="dropdown">
          <li><a href="#">Features</a>
          </li>
          <li><a href="#">Pricing</a>
          </li>
          <li><a href="#">Customers</a>
          </li>
          <li><a href="#">Integrations</a>
          </li>
        </ul> --> 
  </li>
  <li> <a href="#" role="menuitem" tabindex="-1">Services</a> </li>
  <li> <a href="#" role="menuitem" tabindex="-1">Support</a> 
    <!--  <ul class="dropdown">
          <li><a href="#">Product Guide</a>
          </li>
          <li><a href="#">Help</a>
          </li>
          <li><a href="#">Terms & Privacy</a>
          </li>
          <li><a href="#">Developers</a>
          </li>
        </ul> --> 
  </li>
  <li><a href="#" role="menuitem" tabindex="-1">Register</a> </li>
  <li><a href="contact-us.php" role="menuitem" tabindex="-1"> Contact Us </a> </li>
</ul></div> 
    <!-- Stat Toggle Nav Link For Mobiles -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <i class="fa fa-bars"></i> </button>
    <!-- End Toggle Nav Link For Mobiles --> 
    <a class="navbar-brand" href="http://localhost/kornerStone/" style="padding-top: 8px; padding-bottom: 7px;"> <img alt="" src="images/logo.png" class="img-responsive logo" style="margin-top:11px !important;"> </a> </div>
  <div class="navbar-collapse collapse"> 
    <!-- Stat Search --> 

    <!-- End Search --> 
    <!-- Start Navigation List -->
    <ul class="nav navbar-nav navbar-right">
      <li class=""> <a href="#" style="padding-top: 20px; padding-bottom: 20px;">Home</a></li>
      <li class="active"> <a href="#about" style="padding-top: 20px; padding-bottom: 20px;">About Us</a> 
        <!--ul class="dropdown">
              <li><a href="#">Profile</a>
              </li>
              <li><a href="#">Press</a>
              </li>
            </ul--> 
      </li>
      <li> <a href="#service" style="padding-top: 20px; padding-bottom: 20px;">Services</a> </li>
      <li><a href="#" style="padding-top: 20px; padding-bottom: 20px;">Register</a> </li>
      <li><a href="contact-us.php" style="padding-top: 20px; padding-bottom: 20px;"> Contact Us </a> </li>
    </ul>
    <!-- End Navigation List --> 
  </div>
</div>

因为你可以看到我们李有一个类ACTIVE。

Answer 1

您需要在nav ul容器中添加一个 nav-default 类，以便将关于我们的导航显示为活动状态（https://jsfiddle.net/4jsaq266/1/）：

...
<div class="navbar-default navbar-collapse collapse"> 
...
   <ul class="nav navbar-nav navbar-right">

bootstrap.js自动激活标题中的navbar li

1 个答案: