다른 페이지에 하나의 nav_bar.html 파일이 포함되어있는 경우 활성화 된 메뉴 항목을 어떻게 표시합니까?

시간을내어 읽어 주셔서 감사합니다.다른 페이지에 하나의 nav_bar.html 파일이 포함되어있는 경우 활성화 된 메뉴 항목을 어떻게 표시합니까?

내 메인 페이지에 자바 스크립트 (jQuery) 탐색 막대가 있습니다. 이는 내 페이지에 단순히 "포함"되어 있습니다. 예를 들어, "nav_bar.shtml"인 탐색 표시 줄을 "포함"하는 index.shtml이 있습니다. 그리고 이것은 다른 페이지마다 동일합니다. 이제는 현재 설정으로 nav_bar.shtml 페이지가 정적으로 유지되어 현재 어떤 메뉴 항목이 선택되어 있는지 사용자에게 표시 할 방법이 없습니다.

내가 원하는 것은 여전히 하나의 nav_bar.shtml 파일을 가지고 있지만 개별 페이지에서 사용자가 탐색 표시 줄에서 선택한 현재 메뉴 항목을 표시 할 수 있습니다 (다른 음영에서와 같이). 색상 등). nav_bar.shtml이 정적 인 경우이 작업을 수행 할 수있는 명확한 방법은 없습니다. 각 페이지마다 완전히 새로운 Javascript 탐색 막대를 인스턴스화하고 싶지 않으면이 문제를 해결할 수 있습니까? 아니면 각 페이지가 그 페이지에 고유 한 nav_bar 코드의 자체 버전을 필요로하기 때문에 음영이 필요한 항목을 알고 있습니까?

출처

2010-08-14 Mike

한 방법입니다 : 당신이 jQuery를 사용하는 경우

어쨌든, 당신은 항상 같은 것을 사용할 수 있습니다 현재의 window.location.pathname과 비교하십시오. 멋진 URL이 있으면 너무 어렵지 않습니다. 길고 복잡한 URL이 있으면 작동하지 않을 수 있습니다.

그래서, 여기에 일반적인 생각입니다 :

이

$(document).ready(function(){ 
    var thispage = location.pathname.substring(1); 
    $('#menu li a[href~="' + thispage + '"]') // ~= is contains. Tweak as needed. 
    .addClass('active'); 
});

메뉴를 가정하면 다음과 같이 보입니다은 :

li.active { 
    background-color: yellow; 
}

출처

2010-08-14 02:21:49

window.location.pathname을 사용하여 사용자가 현재 어떤 페이지를 검색했는지 파악하고 이에 따라 관련 메뉴 항목을 음영 처리 할 수 있습니다.

예 :

function shadeMenuItem(item){ 
    //Your code to style the given element here 
} 
$(document).ready(function() { 
    if(window.location.pathname.match(/^\/questions.*/)){ 
     shadeMenuItem($('#questions')); //shade menu item 'questions' 
    } 
    else if(window.location.pathname.match(/^\/users.*/)){ 
     shadeMenuItem($('#users')); //shade menu item 'users' 
    } 
});

이 코드는 현재 페이지에 구현 된 경우

첫번째 조건은 shadeMenuItem()에 전달 #questions로 소자 것 즉, 일치한다.

출처

2010-08-14 01:59:07

나는 이것이 당신이 찾고있는 대답인지는 모르겠다. 그러나 특정 페이지의 특정 요소를 음영 처리하기 위해 자바 스크립트가 필요하지 않습니다.

당신은 항상 예를 들어, CSS 선택기를 활용할 수 있습니다 :

<body id="homepage"> 
    <ul id="tabs"> 
    <li id="tab-homepage"><a href="...">homepage</a></li> 
    <li id="tab-news"><a href="...">news</a></li> 
    ...

당신의 CSS에서 당신이 뭔가처럼 말할 수있다 :

그래서

#homepage #tab-homepage { background-color: red } 
#newspage #tab-news { background-color: blue }

가, 마지막으로, 당신은 단지를 변경해야 음영 처리 된 메뉴 항목을 가져 오기 위해 body 요소의 "id"속성. 링크의 href들 거기에 발견, 메뉴에 보이는 몇 가지 코드를 작성하기 위해이 작업을 수행하는

$('body').attr('id', '...');

출처

2010-08-14 02:12:52 janvidar

나는 그가 계속하고 싶은 생각 :

<ul id="menu"> <li><a href="page1.html">This</a></li> <li><a href="page2.html">That</a></li> <li><a href="page3.html">The Other</a></li> </ul>

그리고 물론

nav_bar.shtml 파일은 정적이지만 현재 페이지의 메뉴 항목을 음영 처리합니다 ... Javascript를 사용해야하거나 다른 Nav _bar 파일은 각 페이지에 포함되어 있습니다. –

네 말이 맞아.어쩌면 그는 window.location과 CSS3 선택기를 사용하여 해당 위치를 가리키는 메뉴 항목을 가져온 다음 항목의 속성을 변경할 수 있습니다. – janvidar

다른 페이지에 하나의 nav_bar.html 파일이 포함되어있는 경우 활성화 된 메뉴 항목을 어떻게 표시합니까?

답변

관련 문제