메뉴 항목이 현명하게 스크롤되는 메뉴를 만들려고합니다. 다음 메뉴 항목을 클릭 할 때 이전 메뉴 클래스에서 활성 클래스를 제거하지만 새 메뉴에 활성 클래스를 추가하지 않는 것을 제외하고 모든 것이 완벽합니다.
아래는 내 코드입니다
<div class="row text-center" id="side-menu">
<nav>
<ol>
<li>
<a href="#page1" class="myanimate">
<span class="icons iconactive"><i class="fa fa-circle"></i></span>
<span class="namee">Home</span>
</a>
</li>
<li>
<a href="#page2" class="myanimate">
<span class="icons"><i class="fa fa-circle"></i></span>
<span class="namee">Design</span>
</a>
</li>
<li>
<a href="#page3" class="myanimate">
<span class="icons"><i class="fa fa-circle"></i></span>
<span class="namee">Review</span>
</a>
</li>
</ol>
</nav>
</div>
css 활성 메뉴
.iconactive{
font-size: 15px;
color: brown;
margin-right: -3.2px;
}
Jquery 코드
$(document).ready(function() {
var scrollLink = $('.myanimate');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 2000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).children('.icons').addClass('iconactive');
$(this).children('.icons').removeClass('iconactive');
}
});
});
});
jquery 부분의 동일한 요소에서 활성 클래스를 추가 및 제거하고 있습니다.
$(document).ready(function() {
var scrollLink = $('.myanimate');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 2000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다