위치 기반 버튼 강조 표시

Question

조회중인 페이지를 기준으로 탐색 버튼을 강조 표시하려고합니다. 페이지의

1. 가져 오기 URL
2. 페이지의 특정 파일 이름 가져 오기를 찾을 수없는 경우, 다음을 :

   var loca = String(document.location.href); 
   
   // Get document location and specific page. 
   if (loca) { 
       if(loca.search(RegExp("((/[\w]*)\.php)")) != -1) { 
        activate(loca.match(RegExp("((/[\w]*)\.php)").split("/").join(""))); 
       } else { 
        activate("home"); 
       } 
   } 
   
   // Activate a button 
   function activate(bName) { 
       $(".button[name=" + bName + "]").css({ 
        "border-left": "1px solid white", 
        "border-right": "1px solid white" 
       }); 
   } 
   

   는 내가 일이 원하는 것은 이것이다 : 여기에 지금까지 무엇을 가지고 우리는 홈페이지에 있습니다.

3. jQuery를 사용하여 버튼 이름을 찾고 이름이 파일 이름과 일치하면 강조 표시하려고합니다.

"홈"버튼 만 강조 표시됩니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 또한, 내가 더 잘 수행 할 수있는 방법에 대한 제안 사항이 있으면 알려 주시기 바랍니다!

var pathname = window.location.pathname.split("/"); 
var filename = pathname[pathname.length-1].split(".")[0]; 

alert(filename); 

Answer 1

내가 대신, 같은 파일 이름을 얻을 것입니다. 결과를 변수 및 console.log에 저장하려고 했습니까?

Answer 2

내가 해결책을 가지고 있지 않지만 나는 정규식 결함 가정 것 :

Answer 3

정규식이 잘못되었습니다.

var loc_match = window.location.href.match(/(\w+)\.php/); 
activate(loc_match ? loc_match[1] : "home"); 

Answer 4

실제로 이런 식으로 구현했습니다. 내 코드는 다음과 같습니다.

var currentPage = window.location.pathname.toLowerCase().split('/').reverse()[0].split('#')[0].split('?')[0]; 

if (!currentPage || currentPage == '') 
{ 
    currentPage = 'default.aspx'; 
} 

$('#nav li').removeClass('current').each(function() { 
    var href = $(this).find('a').first().attr('href'); 
    if (href && href.toLowerCase().indexOf(currentPage) >= 0) 
    { 
     $(this).addClass('current'); 
    } 
}); 

이것은 쿼리 문자열이나 검색어가 URL에있을 수 있음을 고려합니다. reverse()을 사용하면 가장 효율적인 방법이 아닐 수도 있지만 확실히 작동합니다.

Answer 5

regexp를 새 RegExp 객체로 선언하면 이중 슬래시 이스케이프 기호 (예 : var a = /\w/i;과 같은 리터럴을 지정할 때 하나의 백 슬래시)를 사용해야합니다. 이 활성 요소에 클래스를 지정하는 것이 더 쉽습니다 말했다 이미

var loca = document.location.href; 
var pattern = new RegExp("[\\w]*(?=\\.php)","i"); 
// Get document location and specific page. 
    if(pattern.test(loca)) { 
     activate(pattern.exec(loca)); 
    } else { 
     activate("home"); 
    } 
// Activate a button 
function activate(bName) { 
    $(".button[name=" + bName + "]").addClass('active') 
} 

을 그리고 : 그래서, 당신의 코드는 일부 등록 특급 보정 후 작동합니다.