자바스크립트 클릭이벤트 해제하는법좀 알려주세요
조회수 554회
/<script>
$(document).ready(function(){
$('.flow7_effect button').click(function(){
if ($('div.'+$(this).attr('class')).hasClass('show')){
$('div.ban_txt').removeClass('show');
} else {
$('div.ban_txt').removeClass('show');
$('div.'+$(this).attr('class')).addClass('show');
}
});
});
</script>
버튼을 클릭하면 텍스트가 나오고 다른버튼을 클릭하면 열려져있던 텍스트가 닫히고 누른버튼의 텍스트가뜨게됩니다. 모든 버튼의 텍스트를 항상 뜨게하고싶은데 어떻게해야하는지 알려주시면 감사하겠습니다
//{*** service/effect.php ***}
{ # header }
<style>
.sub_content { width:100%; padding:0; }
.flow7_title { padding:60px 0; background:#00a1e0; }
.flow7_title h2 { font-size:35px; font-weight:400; color:#ffffff; line-height:1; text-align:center; }
.flow7_effect { background:#fff; }
.flow7_effect > ul { width:1000px; margin:0 auto 50px; }
.flow7_effect > ul:after { clear:both; content:''; display:block; }
.flow7_effect > ul > li { clear:both; display:block; position:relative; }
.flow7_effect > ul > li:nth-child(2n+1) {}
.flow7_effect > ul > li .img { }
.flow7_effect > ul > li .img img { width:100%; }
.flow7_effect > ul > li .ban_txt { position:absolute; display:inline-block; background:rgba(244,244,244,0.7); padding:12px; border-radius:3px; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; -ms-transition:all .25s ease; transition:all .25s ease; }
.flow7_effect > ul > li .ban_txt.show { opacity:1; filter:alpha(opacity=100); }
.flow7_effect > ul > li .ban_txt h3 { color:#00a1e0; font-size:16px; font-weight:500; letter-spacing:0px; margin-bottom:15px; }
.flow7_effect > ul > li.ban2 .ban_txt h3 { color:#3abea6; }
.flow7_effect > ul > li.ban3 .ban_txt h3 { color:#302d4a; }
.flow7_effect > ul > li .ban_txt p { color:#000; font-size:16px; font-weight:300; letter-spacing:0px; line-height:1.3; }
.flow7_effect > ul > li button { position:absolute; z-index:10; display:block; width:40px; height:40px; border-radius:100%; background:transparent; }
.flow7_effect > ul > li.ban1 .ban_txt.txt1 { top:104px; right:50%; margin-right:120px; text-align:right; }
.flow7_effect > ul > li.ban1 .ban_txt.txt2 { top:318px; left:50%; margin-left:160px; }
.flow7_effect > ul > li.ban1 .ban_txt.txt3 { top:448px; right:50%; margin-right:190px; text-align:right; }
.flow7_effect > ul > li.ban1 button.txt1 { top:218px; right:50%; margin-right:46px; }
.flow7_effect > ul > li.ban1 button.txt2 { top:273px; left:50%; margin-left:127px; }
.flow7_effect > ul > li.ban1 button.txt3 { top:697px; right:50%; margin-right:197px; }
.flow7_effect > ul > li.ban2 .ban_txt.txt4 { top:80px; left:50%; margin-left:144px; }
.flow7_effect > ul > li.ban2 .ban_txt.txt5 { top:368px; right:50%; margin-right:190px; text-align:right; }
.flow7_effect > ul > li.ban2 .ban_txt.txt6 { top:556px; left:50%; margin-left:90px; }
.flow7_effect > ul > li.ban2 button.txt4 { top:249px; left:50%; margin-left:-25px; }
.flow7_effect > ul > li.ban2 button.txt5 { top:446px; right:50%; margin-right:99px; }
.flow7_effect > ul > li.ban2 button.txt6 { top:464px; left:50%; margin-left:58px; }
.flow7_effect > ul > li.ban3 .ban_txt.txt7 { top:290px; right:50%; margin-right:210px; text-align:right; }
.flow7_effect > ul > li.ban3 .ban_txt.txt8 { top:330px; left:50%; margin-left:170px; }
.flow7_effect > ul > li.ban3 .ban_txt.txt9 { top:804px; right:50%; margin-right:-6px; text-align:right; }
.flow7_effect > ul > li.ban3 button.txt7 { top:401px; right:50%; margin-right:154px; }
.flow7_effect > ul > li.ban3 button.txt8 { top:401px; left:50%; margin-left:23px; }
.flow7_effect > ul > li.ban3 button.txt9 { top:851px; right:50%; margin-right:-62px; }
.flow7_effect .bottom_txt { background:#e5e5e5; padding:70px 0 60px; text-align:center; }
.flow7_effect .bottom_txt h3 { color:#333333; font-size:24px; font-weight:500; margin-bottom:20px; }
.flow7_effect .bottom_txt a { display:inline-block; line-height:50px; height:50px; padding:0 50px; background:#00a1e0; border-radius:4px; font-size:20px; color:#ffffff; }
</style>
<script>
$(document).ready(function(){
$('.flow7_effect button').click(function(){
if ($('div.'+$(this).attr('class')).hasClass('show')){
$('div.ban_txt').removeClass('show');
} else {
$('div.ban_txt').removeClass('show');
$('div.'+$(this).attr('class')).addClass('show');
}
});
});
</script>
<div class="flow7_title"><h2>효과</h2></div>
<div class="flow7_effect">
<ul>
<li class="ban1">
<button class="txt1"></button>
<button class="txt2"></button>
<button class="txt3"></button>
<div class="ban_txt txt1" id="ban_txt txt1">
<h3>어깨 [SHOULDER]</h3>
<p>
마사지 건을 이용해 어깨 관절의<br>
가동범위를 만드는 것이 중요하다<br><br>
어깨 앞쪽, 어깨 뒤쪽, 겨드랑이<br>
아래쪽을 이완시키면 탁월한<br>
효과를 볼 수 있다.
</p>
</div>
<div class="ban_txt txt2">
<h3>팔꿈치 [ELBOW]</h3>
<p>
팔꿈치 부상과 통증을 호소하는 사람은<br>
일반적으로 팔꿈치 외측부의 경직과<br>
손등쪽의 경직을 보인다.<br><br>
팔꿈치 외측부와 손등쪽을 이완하게<br>
되면 통증을 줄일 수 있다.
</p>
</div>
<div class="ban_txt txt3">
<h3>발바닥 [SOLE]</h3>
<p>
발바닥의 근육이 경직된 상태거나<br>
종아리의 힘이 약한 상태에서<br>
걷게 되면 통증을 느낄 수 있다.<br><br>
편안한 발을 만들기 위해서는<br>
마사지 건을 사용한 발바닥의<br>
유연성 회복과 운동으로<br>
종아리 근력 강화를 병행해야 한다
</p>
</div>
<div class="img"><!--{ @dataBanner('85711886', true) }--><img src="{.bannerImageUrl}"><!--{/}--></div>
</li>
<li class="ban2">
<button class="txt4"></button>
<button class="txt5"></button>
<button class="txt6"></button>
<div class="ban_txt txt4">
<h3>목 [NECK]</h3>
<p>
목 뒤쪽의 통증은 스마트폰,<br>
컴퓨터 사용, TV시청 등 잘못된<br>
자세에 의해서 생기는 경우가 많다.<br><br>
통증을 줄이기 위해서는<br>
목의 뒤쪽과 옆쪽에 위치한 근육을<br>
마사지 건으로 이완 시켜야 한다.
</p>
</div>
<div class="ban_txt txt5">
<h3>무릎 [KNEE]</h3>
<p>
무릎 통증의 예방을 위해서는<br>
앞쪽의 무릎뼈(슬개골)의 움직임이<br>
네 방향으로 원활하게 움직여야 한다.<br><br>
무릎뼈가 부드럽게 움직이고<br>
힘을 내기 위해서는 외측부의<br>
연부조직을 마사지 건으로<br>
이완 시켜야 한다.
</p>
</div>
<div class="ban_txt txt6">
<h3>고관절 [COXA]</h3>
<p>
고관절이 경직되면 허리의 움직임이 커지게 돼<br>
디스크를 유발하거나 요통을 발생하는 경우가 많다.<br><br>
고관절 주변 연부조직 중 경직되기 쉬운 곳을<br>
마사지 건을 이용해 이완해 주면<br>
신체 밸런스 유지와 요통 예방에 도움이 된다.
</p>
</div>
<div class="img"><!--{ @dataBanner('1105027259', true) }--><img src="{.bannerImageUrl}"><!--{/}--></div>
</li>
<li class="ban3">
<button class="txt7"></button>
<button class="txt8"></button>
<button class="txt9"></button>
<div class="ban_txt txt7">
<h3>허리 [WAIST]</h3>
<p>
요통은 대부분 일상생활 중<br>
잘못된 자세를 원인으로 한다.<br><br>
요통을 가지고 있는 사람은<br>
허리의 뒷부분, 고관절 앞부분과<br>
등 위쪽의 근육이 짧아지는데<br><br>
이 부분을 마사지 건으로<br>
이완하면 통증을 줄일 수 있다.
</p>
</div>
<div class="ban_txt txt8">
<h3>등 [BACK]</h3>
<p>
등 주변 통증이 발생하는 원인은<br>
대부분 일상생활 중 나쁜 자세다.<br><br>
거북목 또는 둥근 어깨를 가지고 있는<br>
사람의 등은 뒤로 나오게 되는데,<br>
이로 인해 통증과 불편함을 느낀다.<br><br>
둥근 등으로 인한 통증을<br>
줄이기 위해서는 가슴 근육과 등 등육을<br>
같이 마사지 건으로 이완 시켜야 한다.
</p>
</div>
<div class="ban_txt txt9">
<h3>발목 [ANKLE]</h3>
<p>
발목 염좌로 고생한다면<br>
발목 외측 불안정성으로 인한<br>
외측 아킬레스 부위의 스트레스<br>
누적이 원인일 수 있다.<br><br>
발목 관리를 위해서 아킬레스<br>
외측부를 마사지 건으로 이완<br>
시켜주면 염좌나 통증을<br>
예방할 수 있다.
</p>
</div>
<div class="img"><!--{ @dataBanner('3634848185', true) }--><img src="{.bannerImageUrl}"><!--{/}--></div>
</li>
</ul>
</div>
</div>
{ # footer }
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
?htmlid=service/effect.html이라니...id="ban_txt txt1"이라니... 하여간 이래서 PHP는 할게 못됩니다. ㅠ암튼 각설하고.. 원하시는 것은
.toggleClass()일 것 같네요. DEMO: https://jsfiddle.net/a7yzwj9p/2/$('#foo1').click(function () { $('#bar1').toggleClass('show'); });- 감사합니다ㅠㅠ... 페이지를 열었을때 모든 텍스트가 전부 보이는상태로는 어떻게해야되나요? 버튼을 누르지않고 버튼눌렀을때 나오는 텍스트들을 전부 출력되있는상태로 만들고싶습니다 알 수 없는 사용자 2019.12.18 17:46
- div class="ban_txt txt9" style="display:block" 이 방법으로는 안되더라구요 알 수 없는 사용자 2019.12.18 17:55
- div class="ban_txt show txt9" 해보세요 엽토군 2019.12.18 17:56
- div class="ban_txt txt9" style="display:block" 이 방법으로는 안되더라구요 엔터키누르니까 바로등록되네요... $('div.ban_txt1').show(); 1~9까지 전부 스크립트에 넣으면될까요 기존 스크립트는 없애야하나요? 알 수 없는 사용자 2019.12.18 17:57
- 아뇨.. 이론상 .ban_txt.show 에 해당되는 모든 엘리먼트는 opacity가 1이 되니까 눈에 보여야 합니다. JS를 수정하지 마시고 본문의 html을 고쳐서 클래스를 붙여보세요. 엽토군 2019.12.18 18:00
- 오 답변대로 하니까 됩니다 정말 감사합니다 ㅠㅠ 알 수 없는 사용자 2019.12.18 18:01
댓글 입력