Question

我刚创建了一个导航栏li，在实现活动功能滚动之前，我注意到最后一个li自动激活。如何删除它并将其设置为导航li仅在滚动时处于活动状态？

P.S。我正在使用wordpress和amp;自举

HTML：

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="91" id="info-head"> <!-- navbar navbar-custom navbar-inverse navbar-static-top -->
<div class="container-fluid">
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li><a href="#about-us">About Us</a></li>
      <li><a href="#faqs">FAQ's</a></li>
      <li><a href="#contact-us">Contact Us</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="work-with-us">Work With Us <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#drivers">Drivers</a></li>
          <li><a href="#partners">Partners</a></li>
          <li><a href="#in-house">In House</a></li>
        </ul>
      </li>
      <li><a href="#terms-and-conditions">T's & C's</a></li>
      <li><a href="#privacy-policy">Privacy Policy</a></li>
    </ul>
  </div>
</div>
</nav>

<div id="about-us" >
  <h2>About Us</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling </p>
</div>
<div id="faqs">
  <h2>FAQ's</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact-us">
  <h2>Contact Us</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="drivers">
  <h2>Work With Us: Drivers</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="partners">
  <h2>Work With Us: Partners</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="in-house">
  <h2>Work With Us: In House</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="terms-and-conditions">
  <h2>Terms and Conditions</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="privacy-policy">
  <h2>Privacy Policy</h2>
  <p>Try to scroll this section and look at the navigation bar while scrolling!  </p>
</div>
</body>

CSS：

.navbar {
  margin: 0;
  background-color: #e6e6e6;
  border-radius: 0;
  border: none;
}
.navbar-inverse .navbar-collapse {
  border: none;
}
.navbar-inverse .navbar-nav>li>a {
  color: #000;
  font-size: 13px;
}
.navbar-inverse .navbar-nav>li>a:hover {
  color: #fd0e35;
}
#about-us {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#faqs {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#contact-us {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#drivers {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#partners {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#in-house {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#terms-and-conditions {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}
#privacy-policy {
  padding-top: 20px;
  height: 300px;
  color: #000;
  background-color: transparent;
  border-top: 1px solid #fd0e35;
}

JS：

function ScrollSpy(element, options) {
  this.$body          = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector       = (this.options.target || '') + ' .nav li > a'
  this.offsets        = []
  this.targets        = []
  this.activeTarget   = null
  this.scrollHeight   = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
}

Dropdown.prototype.toggle = function (e) {
  var $this = $(this)

if ($this.is('.disabled, :disabled')) return

  var $parent  = getParent($this)
  var isActive = $parent.hasClass('open')

  clearMenus()

if (!isActive) {
  if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
    // if mobile we use a backdrop because click events don't delegate
    $(document.createElement('div'))
      .addClass('dropdown-backdrop')
      .insertAfter($(this))
      .on('click', clearMenus)
  }

  var relatedTarget = { relatedTarget: this }
  $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

  if (e.isDefaultPrevented()) return

  $this
    .trigger('focus')
    .attr('aria-expanded', 'true')

  $parent
    .toggleClass('open')
    .trigger($.Event('shown.bs.dropdown', relatedTarget))
}

return false
}

Answer 1

请匹配所有html标记，然后关闭所有打开的标记。您尚未关闭所有代码。

如何删除导航栏li的活动状态？

1 个答案: