2
は、私はちょうどナビゲーションバー李を作成しましたし、アクティブな機能のスクロールを実装する前に、私は最後のLiが自動的にアクティブになることに気付きました。これを削除して、nav liがスクロールでのみアクティブになるようにするにはどうすればよいですか？navbar liのアクティブな状態を削除するにはどうすればよいですか？
P.S.
<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
}
jqueryコードを表示できますか？ –
私はちょうどあなたに感謝しています。私は道でJavaScriptとブートストラップを使用してい –
実際にあなたのスクロールは、あなたの最後のセクションがアクティブになる理由は –