다른 사람이 열리면 JS 토글 div를 닫고 클릭시 이미지 변경

Question

자바 스크립트를 처음 사용했습니다. 현재, 나는 내 웹 사이트를위한 작은 토글 작업을하고있다.

목표는 정보로 다른 섹션을 여는 3 개의 버튼을 갖는 것입니다. 내 웹 사이트에서이 작업을 수행했습니다. 자, 내가 성취하고자하는 것은 다른 사람들이 열릴 때 다른 divs를 닫는 것입니다. 또한 버튼에 표시기 (예 : 주황색 이미지)를 포함하여 페이지가로드 될 때 첫 번째 div가 열리길 원합니다. 이걸 좀 도와 주실 수 있습니까?

어떤 이유

스크립트가 아닌 JSfiddle에, 내 웹 사이트에 작동합니다 은 https://jsfiddle.net/q7evaLsn/1/

는 현재 코드 :

 
$('.button1').click(function(){ 
 
    $('.product').slideToggle('slow'); 
 
}); 
 

 
$('.button2').click(function(){ 
 
    $('.lockedin').slideToggle('slow'); 
 
}); 
 

 
$('.button3').click(function(){ 
 
    $('.developers').slideToggle('slow'); 
 
}); 
 

.button2 
 
{ 
 
    padding-top: 10px; 
 
} 
 
.button3 
 
{ 
 
    padding-top: 15px; 
 
}

<h3> 
 
    <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/> 
 
</h3> 
 
<h3> 
 
    <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/> 
 
</h3> 
 
<h3> 
 
    <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/> 
 
</h3> 
 

 
<div class="product"> 
 
    Testdiv1 
 
</div> 
 

 
<div class="lockedin"> 
 
    Testdiv2 
 
</div> 
 

 
<div class="developers"> 
 
    Testdiv3 
 
</div>

은

는 당신의 도움이 크게 감사합니다!

Answer 1

토글을 시작하기 전에 모든 항목을 위로 끌어 올 수 있습니다. 당신이 당신의 일부 기능에 필요한 jQuery 라이브러리를 포함하지 않았기 때문에 전

$('.button3').click(function(){ 
    $('.product').slideUp(); 
    $('.lockedin').slideUp(); 
    $('.developers').slideToggle('slow'); 
    }); 

Answer 2

귀하의 JSfiddle를 들어

가 작동하지 않습니다. 나중에 참조 할 수 있도록 jQuery는 몇 가지 기본 javascript 함수를 단순화하고 확장하는 인기있는 javascript 라이브러리입니다. 둘 다 교환 할 수 있지만 jQuery의 추가 기능을 원한다면 HTML에 포함시켜야합니다.

당신이 행동하는 이미지를 (이

$('.example-button').click(function(){ 
    $('.section-to-hide-1').slideUp(); 
    $('.section-to-hide-2').slideUp(); 
    $('.section-to-toggle-1').slideToggle(); 
}); 

마찬가지로 더 형식 조언 : @SURESH에서 언급 한 바와 같이

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 

당신은 가능성이 곳을 대상 영역을 전환하는 다른 지역을 위하고 싶을 것이다 버튼으로 사용).

• 그것은 제목/제목 이외의 다른 이러한 헤더 태그를 사용하는 것은 일반적으로 나쁜 습관이다
내가 같은 일을 할 수있는 태그 또는 버튼 태그를 사용하는 것이 좋습니다 것

• 나는 시도 할 것

  <button class="button1">Products</button> 
  
  <style> 
      .button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; } 
  </style> 
  

이들 수 있습니다 :하지 당신과 같이 유사하게 버튼 스타일을 할 수있을 것입니다, 기본적으로 텍스트 버튼으로 IMG 태그를 사용하는 earch 엔진/화면 판독기를 사용하여 버튼 요소를 읽고 호버 효과 등을 만들 수 있습니다.