JQuery와 CSS를 선택한 메뉴 문제

안녕 난 메뉴 색상을 변경하기위한 jQuery를 가지고JQuery와 CSS를 선택한 메뉴 문제

.selected{ 
    background-color: red; 
}

$("#nav-container>li").click(function(){ 
    $(this).addClass('selected') 
     .siblings() 
     .removeClass('selected'); 
});

은 HTML은 다음과 같다 :

<ul id="nav-container"> 
    <li id="welcome"> 
     <a href="/" >Welcome</a> 
    </li> 

    <li id="find"> 
     <a href="/find">Find</a> 
    </li> 

    <li id="talk"> 
     <a href="/talk">Talk</a> 
    </li> 

    <li id="events"> 
     <a href="/event">Events</a> 
    </li> 
</ul>

색상 변화가 일어나지 만, 페이지가 새 페이지에 있거나 페이지가 새 페이지로 다시로드되는 경우 색상이 더 이상 선택되지 않습니다. 내가 아직 추가하지 않은 것은 무엇입니까? 내가 여기서 아무것도 놓치고 있니?

출처

2012-10-25 d3bug3r

페이지 요청간에 현재 선택된 항목을 저장하는 방법이 필요합니다. 쿠키 또는 페이지의 숨겨진 필드로 값을 읽을 수 있습니다. –

즉, 누락 된 부분은 페이지 수명주기에 대한 기본적인 이해입니다. –

서버 측에서이 선택 작업 수행 –

addClass의 효과는 현재 문서에만 적용됩니다. SessionID 및 PHP로 작업 할 수 있습니다

출처

2012-10-25 08:15:04

jQuery는 페이지 리로드 후에 어떤 페이지를 선택했는지 알지 못하므로 서버 측 코드 (PHP) 또는 페이지로드시 어느 페이지에서 selected 클래스를 설정해야합니다 당신은 jQuery에서 on이고 요소에 selected 클래스를 설정합니다.

$(function(){ 
    var $ul = $("#nav-container"); 
    var path = window.location.pathname; 
    var $a = $('a[href="'+path+'"]', $ul); 
    if ($a && $a.length) { 
     var $li = $a.parent(); 
     $li.addClass('selected'); 
    } 
});

을하고 당신이 가지고있는 클릭 기능을 제거 :

출처

2012-10-25 08:15:28 Andy

이 작업을 시도 할 수 있습니다.

출처

2012-10-25 08:23:13

이것은 정상적인 동작입니다. Javascript 컨텍스트는 페이지에만 적용됩니다. 페이지를 다시로드하면 HTML 마크 업 중 일부가 같더라도 Javascript 세트 속성이 재설정됩니다.

쿠키 또는 서버 측 코드 (세션)를 사용하여 영구 요소 강조 표시를 수행 할 수 있습니다. 이 코드를 테스트하지 못했지만, 그것을 작동합니다 :

$("#nav-container>li").click(function(){ 
     $(this).addClass('selected') 
     .siblings() 
     .removeClass('selected'); 
     $.cookie("selected", $(this).attr('id'), { path: '/' }) 
}); 

$(document).ready(function() { 
     $("#" + $.cookie("selected")).addClass('selected') 
});

참고 : jquery-cookie plugin를 사용하는 경우

당신은 쿠키 like this을 설정할 수 있습니다. 물론 사용자는이를 사용하려면 쿠키를 활성화해야합니다.

출처

2012-10-25 08:24:29 pistache

JQuery와 CSS를 선택한 메뉴 문제

답변

관련 문제