js에서 현재 클래스를 정의하는 함수

내가 원하는 것은 페이지 이름에 따라 <li> 태그에 "현재"클래스를 정의하는 함수를 실행하는 것입니다. 예를 들어, 페이지의 이름이 index.php 인 경우,이 함수는 <li> 태그 내의 링크가 페이지 (index.php)와 같은 이름인지 확인합니다. 나는 이것을 설명하는 것이 최선이 아니라고 미안하다. 다음은 예제 코드입니다.js에서 현재 클래스를 정의하는 함수

<ul id="navigation"><li><a href="index.php"></li></ul>.

나는 클래스 링크 페이지 이름과 같은 경우 "현재"를 <li> 태그에 정의를 원한다. 이 일을 할 수있는 방법이 있습니까? 아니면 쓸데없는 사명을 짊어 질까?

출처

2010-08-04 Chad

좋아 ... 음 ...

function liClass(context) { 
    //Choose your parent node 
    context = context || document; 

    var pathparts = window.location.pathname.split('/'); //split on path 
    var curfile = pathparts[pathparts.length-1]; //last item is the filename right? 

    var lis = context.getElementsByTagName('li'); 
    for (var i=0, l=lis.length; i<l; i++) { 
    var a = lis[i].getElementsByTagName('a'); 

    if (!a.length) continue; //li has no a, moving on... 

    //Okay, this match might need some work, tried 
    //to make it fairly forgiving, tweak for your needs 
    if (a[0].href.indexOf(curfile) != -1) lis[i].className = 'current'; 
    } 
}

, 그것을 밖으로 시도 작동 여부 만약 내가 그것을 테스트하지 않은 원인 날, 알려 주시기 바랍니다 ...

출처

2010-08-04 04:38:47 MooGoo

나는 생각한다 현재 페이지를 가리키는 링크의 모양을 변경하고 싶은지 묻는 중입니다. 코드는 다음과 같습니다.

var list=document.getElementsByTagName('a'); 
var page=window.location.pathname; 
var i=list.length; 
while(i--){ 
    if(list[i].src.indexOf(page)>0){ 
    list[i].className='current'; 
    } 
}

매우 정확한 방법은 아닙니다. 기본 구조는 정확하지만, 예를 들어 somewebsite.com 링크는 실제로 somewebsite.com/index.php를 가리키고 있습니다. 따라서 링크에 따라 홈 페이지에 문제가 발생할 수 있습니다. 또한 링크 설정 방법에 따라 페이지 변수를 구문 분석해야 할 수도 있습니다. 그것은 뭔가를 반환합니다. /help/faq/foo.php 페이지는 faq/foo.php에 대한 링크 만 가질 수 있습니다. 이 모든 것은 사이트의 설정에 따라 크게 달라 지므로 조정을 위해 남겨 두겠습니다.

내가 게시 한 이후에 더 많은 정보를 추가 했으므로 페이지의 <a> 태그가 모두 <li> 태그에있는 링크 목록 만 작성하면됩니다.

출처

2010-08-04 04:39:15 qw3n

위치 객체의 href와 앵커 DOM 요소를 비교하십시오. 일치하면 현재 클래스입니다.

현재 페이지가 링크가 상대 http://www.example.com/home 경우

<a href="/questions">Questions</a>

그러자 DOM 객체의 속성 HREF 절대 경로를 포함하며, 다만 상대적인 부분. 다음과 같이 쓸 수있는 각각의 링크를 통해 루프

link.href = "http://www.example.com/questions"

함수,

function markCurrent(list) { 
    var listItems = list.getElementsByTagName("li"); 

    for(var i = 0; i < items.length; i++) { 
     var link = listItems[i].getElementsByTagName("a")[0]; 
     if(link && (link.href == location.href)) { 
      listItems[i].className += ' current'; 
     } 
    } 
}

함수에 루트 <ul> 노드를 전달합니다.

markCurrent(document.getElementById("navigation"));

출처

2010-08-04 05:17:25 Anurag

js에서 현재 클래스를 정의하는 함수

답변

관련 문제