2012-10-15 2 views
0

버튼을 눌렀을 때 새로운 div를 표시하고 숨기는 jquery가 있습니다. 오히려 버튼보다는 내 자신의 텍스트/이미지를 삽입하고 같은 방식으로 작동하도록하고, 새 창을 드러내고 숨길 수 있습니다. 여기jquery show href 태그가있는 div를 숨기기

<script> 
    $(document).ready(function(){ 

     $(".buttons").click(function() { 
     var divname= this.value; 
      $("#"+divname).show("slow").siblings().hide("slow"); 
     }); 

     }); 
</script> 

가 나는 A HREF 태그로 변경하고자하는 버튼 중 하나에 대한 코드이다 : 여기

JQuery와이다.

<input type="button" id="button1" class="buttons" value="div1"></input> 

어떤 도움을 주시면 감사하겠습니다. 감사. 피아

답변

5

당신은 jQuery를 data() 방법을 사용할 수 있습니다 - 적절한 DIV 보여 (사업부의 ID) 앵커 요소에 임의의 데이터를 저장하고, 그 다음에 그 값을 사용하는 - http://api.jquery.com/data/을 : 당신이 원하는 경우

<div id="div1">div one</div> 
<div id="div2">div two</div> 
<a href="#" class="abuttons" data-divid="div1">link</a> 

<script> 
$(document).ready(function(){ 
    $(".abuttons").click(function() { 
     var idname= $(this).data('divid'); 
     $("#"+idname).show("slow").siblings().hide("slow"); 
    }); 
}); 
</script> 

을 ID 대신 클래스 이름을 사용하는 div 두 개를 표시하고 클래스 이름을 achor 태그에 저장하고 표시 할 각 div에 동일한 클래스를 설정하고 #

대신 .을 사용하여 jQuery에서 참조하십시오
<div id="div1" class="divclass">div one</div> 
<div id="div2" class="divclass">div two</div> 

<a href="#" class="abuttons" data-divclass="divclass">link</a> 

<script> 
$(document).ready(function(){ 
    $(".abuttons").click(function() { 
     var classname= $(this).data('divclass'); 
     $("."+classname).show("slow").siblings().hide("slow"); 
    }); 
}); 
</script> 
+2

비표준 데이터 저장 요소에 접근하기 위해'data' 속성을 사용하고 싶습니다. http://api.jquery.com/data/ – Palpatim

+0

이렇게하면 요소에 키/값 쌍을 설정할 수 있지만 여전히 어딘가에 설정해야합니다. 앵커에서 일종의 식별 요소가 필요합니다. 클래스 나 ID가 될 수 있지만 임의의 요소를 사용하면 비표준이라고 정답을 알 수 있습니다. – doublesharp

+1

HTML로 설정 했습니까? 'link' – Palpatim