자바 스크립트를 사용하여 요소 숨기기 및 표시

Question

AB와 같은 가로 방향 메뉴 탐색 기능이있는 페이지의 헤더가 있습니다. A에는 하위 메뉴 D, E 및 B에 하위 메뉴 F 및 G가 있습니다. 기본적으로 헤더 F 및 G에는 hidden.now B와 F, G를 클릭하면 D와 E를 숨겨야합니다. 각각의 메뉴를 클릭 할 때 하위 메뉴의 표시 속성을 설정하는 작은 함수를 만들었지 만 페이지가로드 될 때 D 및 E가 표시되고 F 및 G가 숨겨져 있음을 의미하는 사각형으로 돌아옵니다.

어떻게 이것을 자바 스크립트로 해결할 수 있습니까? 나는 js에 관해서 매우 새롭기 때문에 jquery의 관점에서 생각하지 않습니다.

Answer 1

가능한 경우 해시도 #을 새 URL에 추가 할 수 있습니다. 자바 스크립트를 통해 보여줄베이스와베이스를 찾으십시오.

의사 코드 : Example Here - Source to example here

var hash = location.hash 
if(hash == '#menuA' || hash == '') { 
    //show menuA 
} else if(hash == '#menuB') { 
    // show B 
.....etc 

Answer 2

어떤 메뉴가 선택되었는지 정보로 쿠키를 설정 한 다음 페이지가로드 될 때 쿠키를 읽고 적절하게 메뉴를 설정할 수 있습니다. 여기에 멋진 쿠키 커터 기능이 있습니다. http://www.quirksmode.org/js/cookies.html

Answer 3

, 난 단지 당신이 렇게 할 생각 달성 jQuery를 충분히 잘 미안 알고있다. 아마도 의사 코드가 도움이 될지도 모른다. 하위 메뉴를 만들 때 사용한 html을 게시하면 도움이됩니다.

이 샘플은 nav 요소를 페이지의 개체와 간단히 연결합니다. (바람직하게는 모든 페이지에 링크 외부의 .js 파일)

스크립트 :

내가 팀 프로젝트를 위해 이것을 파악했다

//after you've set all sub-menus to display:none 

//for each nav element 
$('#nav a').each(function(){ //just like a for loop 
    var a,b; 
    // set a equal to the contents of the current nav element in the loop 
    a =$(this).html(); 
    //set b equal to the contents of the first <h2> element on the current page 
    //or to whatever you want to use to distinguish as "a match" (needs not be visible) 
    b =$('h2:first').html(); 
    //if the match is made... in this case, an exact match 
    if(a == b){ 
      //Here you would have your display children code 
      //or display D and E or F and G code, depending on how you've set it up    
     }else //code to execute if no match is made 
    }); 

... 나는 많이도 배울 수 있어요. 그것을 좋아하십시오

Answer 4

이것은 jQuery를 통해 매우 간단합니다. 정렬되지 않은 목록과 목록 항목이있는 매우 기본적인 메뉴를 조롱했습니다. here.

JavaScript에 익숙하지 않다고 말했고, 분명히 이해하고 있지만 jQuery와 같은 프레임 워크에 익숙해지는 것이 절대적으로 중요합니다. jQuery의 선택기 기능은 매우 강력합니다.