>

워드 프레스를 통해 웹 사이트를 만들고 있습니다. 게시 에 따라 스크롤에 활성 메뉴를 구현했습니다. 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

    확인했습니다.

    menuItems = topMenu.find('a[href*="#"]')
    
    

    따라서 # in href를 포함하는 모든 앵커 (a)를 얻게됩니다.

관련 자료

  • 이전 nlp - 어떤 RASA NLU 또는 SNIPS NLU 중 가장 좋은가요?
  • 다음 대문자 및 소문자와 같은 필터에서 여러 항목을 사용할 때 angularjs 필터 문제