jQuery hide/show 2 메뉴

Question

안녕하세요 여러분!

다음과 같은 문제가 있습니다. 하나의 제품에 대한 메뉴와 다른 제품에 대한 다른 메뉴가 있습니다. 다음과 같이 바뀝니다.

Product1 | 제품 2

홈 옵션 1 옵션 2 옵션 3 | Option1 Option2 Option3

여기서 첫 번째 3 개 옵션은 Product1 용이고 마지막 3 개 옵션은 Product2 용입니다. 한 제품에 대한 메뉴 만 보시면됩니다.

내 HTML은 (물론 간체) 같은 떨어지게 간다 :

<div class="products"> 
<a href="#" id="product1">Product1</a> 
<a href="#" id="product2">Product2</a> 
</div> 
<ul id="menu1"> 
<li>Option1</li> 
<li>Option2</li> 
<li>Option3</li> 
</ul> 
<ul id="menu2"> 
<li>Option1</li> 
<li>Option2</li> 
<li>Option3</li> 
</ul> 

을 그리고 jQuery를이 같이 떨어지게 간다 :

이

$(document).ready(function() { 
    $("#product1").addClass("active"); 
    $("#menu2").hide(); 

    $("#product2").click(function() { 
     $("#menu1").hide(); 
     $("#menu2").show(); 
     $("#product1").removeClass("active"); 
     $("#product2").addClass("active"); 
    }); 
    $("#product1").click(function() { 
     $("#menu2").hide(); 
     $("#menu1").show(); 
     $("#product2").removeClass("active"); 
     $("#product1").addClass("active"); 
    }); 
}); 

문제 : 첫 페이지를로드 할 때 모든 것이 괜찮습니다 . 내가 예를 들어 #의 제품 2를 클릭 할 때, 함수에 지정된 모든 것을 수행합니다

$("#product2").click(function() { 
     $("#menu1").hide(); 
     $("#menu2").show(); 
     $("#product1").removeClass("active"); 
     $("#product2").addClass("active"); 
    }); 

을뿐만 아니라 첫 두 줄을 실행합니다

$("#product1").addClass("active"); 
    $("#menu2").hide(); 

을 그리고 #의 제품 1과 # 모두를 얻을 수 product2가 활성 상태이고 두 메뉴가 숨겨져 있습니다. 어떤 아이디어? 미리 감사드립니다.

Answer 1

false를 반환하여 클릭 이벤트의 기본 동작을 방지해야합니다. 이렇게하면 페이지가 다시로드되지 않습니다. 이 같은

뭔가 트릭을 수행해야합니다

$(document).ready(function() { 
    $("#product1").addClass("active"); 
    $("#menu2").hide(); 

    $("#product2").click(function() { 
     $("#menu1").hide(); 
     $("#menu2").show(); 
     $("#product1").removeClass("active"); 
     $("#product2").addClass("active"); 
     return false; 
    }); 
    $("#product1").click(function() { 
     $("#menu2").hide(); 
     $("#menu1").show(); 
     $("#product2").removeClass("active"); 
     $("#product1").addClass("active"); 
     return false; 
    }); 
}); 

Answer 2

짧은 답변을 : 당신은 당신의 기능에 return false를 추가해야합니다.

추가 정보 : 스크립트의 시작에서

다음과 같은 한 :

$("#product1").addClass("active"); 
$("#menu2").hide(); 

나는 product1이있다 있도록 HTML 또는 어딘가에 CSS에서 이러한 속성을 할당하는 경향 것

active 클래스 등

마지막으로 jQuery 아코디언 또는 Tabstrip 구성 요소 만 사용하셨습니까? 당신의 exemple 잘 작동처럼

http://jqueryui.com/accordion/