홈>
워드 프레스를 통해 웹 사이트를 만들고 있습니다. 게시 에 따라 스크롤에 활성 메뉴를 구현했습니다. 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'가 목록에서 제거됩니다
관련 질문
- jquery - Dropown 메뉴 열기/닫기
- php - 단일 및 가변 제품에 대한 '추가 정보 영역'에 SKU 표시
- php - WooCommerce 단일 제품의 장바구니에 제품이 추가되면 JQuery 클릭 트리거
- wordpress - Jquery로 Elementor 섹션 표시 또는 숨기기
- php - WooCommerce에서 할인 된 배송비를 할인 된 장바구니 항목 가격과 결합
- php - 드롭 다운에서 특정 값이 선택되면 '장바구니에 추가'숨기기
- php - Woocommerce에서 선택한 제품 변형의 특정 데이터 표시
- jquery - wordpress/gravity 양식 - 확인중인 라디오 버튼을 기반으로 항목을 표시하거나 숨기는 방법은 무엇입니까?
- php - WooCommerce에서 특정 배송 방법에 대한 결제 배송 필드 섹션 숨기기
확인했습니다.
따라서 # in href를 포함하는 모든 앵커 (a)를 얻게됩니다.