홈>
워드 프레스를 통해 웹 사이트를 만들고 있습니다. 게시 에 따라 스크롤에 활성 메뉴를 구현했습니다. href = "https://forums.athemes.com/t/current-menu-in-one-page-navigation/24822"rel = "nofollow noreferrer">이 .
작동했지만 'href'( " http : /에서 id 대신 링크 대신 링크를 사용하고 있습니다.
#aboutus
대신/wordpress/# aboutus "
)에 문제가 있습니다. 탐색 모음의 일부 항목에는 외부 페이지가 있으며 스크롤해도 해당 항목에 클래스가 추가되지 않습니다.
코드 :
메뉴 항목 :
var lastId,
topMenu = $("#mainnav"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
////////// temp
var temp = $(this).attr("href");
console.log('temp', temp ); // Output example: "http://localhost/wordpress/#aboutus"
////////// ID
var ID
if (temp.indexOf('#') > -1) { // If link = "http://localhost/wordpress/#aboutus"
ID = temp.split('#').pop(); // Output: "aboutus"
} else {
ID = temp.split('/').pop(); // if doesn't have "#"
}
console.log('ID', ID );
///////// item
var item = temp.split('/').pop();
if(!ID){
console.log('ID undefined');
var item = $('body');
} else {
var item = $('#'+ID);
}
console.log('item', item );
if (item.length) { return item; }
});
스크롤 액션 :
// Bind to Control
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
console.log("cur", cur);
console.log("id", id);
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("current-menu-item")
.end().filter("[href='http://localhost/wordpress/#"+id+"']").parent().addClass("current-menu-item");
}
});
"#"가없는 것을 제거하거나 다른 페이지에 클래스를 추가하고 스크롤로 제거하지 않는 방법은 무엇입니까?
- 답변 # 1
관련 자료
- jquery - 창 스크롤이 50 이상일 때 클래스 active에 마우스를 올리는 방법
- javascript - JS를 사용하여 페이지 URL을 기반으로 active 클래스를 추가 및 제거하는 데 도움이 필요합니다
- html - JavaScript를 사용하여 활성 클래스 교체가 제대로 작동하지 않음
- php - jquery를 사용하여 페이지를 새로 고칠 때 div 클래스가 활성화되는 방법
- javascript - 활성 요소에 대한 클래스 추가
- oop - 클래스를 하나 이상의 행동과 다른 클래스와 연관시키는 방법은 무엇입니까?
- javascript - 스크롤 jquery는 이름이 아닌 하나의 클래스 만 선택하십시오
- reactjs - React NavLink에서 활성 클래스를 제거 할 수 없습니다
- javascript - 내 경우 클릭으로 활성 클래스를 제거하는 방법
- android - 다른 클래스의 클래스 필드를 참조하는 방법은 무엇입니까?
- python - 유형의`__init__` 또는`__new__`를 다른 클래스 인스턴스에 바인딩하는 방법은 무엇입니까?
- javascript - vuejs의 URL을 기반으로 라우터 링크에 활성 클래스 추가
- vue.js - 활성 클래스를 루프의 첫 번째 요소에 바인딩하는 방법
- C ++ 다른 클래스를 사용하는 클래스
- javascript - xhr 데이터를 제거하지 않고 클래스 데이터를 XMLHttpRequest 클래스에 바인딩
- javascript - 두 클래스가 서로 같을 때 스타일을 제거합니다 (CSS, HTML, JS)
- javascript - 교차점 관찰자를 사용하여 활성 클래스 전환
- vuejs2 - Vuejs에서 활성 클래스 사용
- 동일한 클래스를 가진 요소를 평범한 Javascript로 나란히 감싸십시오
- python - 목록에서 다른 요소를 제거하면 'False'가 목록에서 제거됩니다
관련 질문
- javascript : 부트스트랩 5에서 모달 앵커로 스크롤이 PHP에서 작동하지 않음
- javascript : 오류 메시지가 트리거되면 버튼 텍스트 되돌리기
- javascript : 페이지 로드 후 맨 위로 자동 스크롤을 중지하는 방법은 무엇입니까?
- php : WooCommerce에서 여러 배송 방법을 선택할 때 결제 필드 숨기기
- php : WooCommerce Checkout 사용자 정의 텍스트 필드에서 Datepicker 활성화
- AJAX 400 잘못된 요청 Wordpress PHP
- php : WordPress에서 Ajax 호출이 작동하지 않음
- php : Select2에서 AJAX의 매개변수 보내기 및 받기
- javascript : woocommerce 측정 가격 계산기 -버튼 클릭 시 측정 입력 값을 특정 %만큼 증가
- jquery : datepicker 문의 양식 7에서 공휴일과 요일을 비활성화해야 합니다.
확인했습니다.
따라서 # in href를 포함하는 모든 앵커 (a)를 얻게됩니다.