탭메뉴에서 한번 더 누르면 닫히게하고싶습니다 스크립트 추가 봐주세요 ㅠ
본문
$(function () {
$(".tab_content").hide();
//$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#000");
//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});
$(this).addClass("active").css("color", "black");
$(".tab_content").hide() //
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
탭한번 더 누르면 닫히게 하고싶은데
어떤코드를 추가해야되나요 참고할거 링크달아주셔도되고
작성해주시면 더 감사하겠습니다 ㅠ0ㅠ
html은
<divid="jstcategoryList2">
<ul class="tabs">
<li rel="tab1""></li>
<li rel="tab2""></li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" style="display: none;">
<ul>
<a><li>1누르면 나오는탭</li></a>
</ul>
</div>
<div id="tab2" style="display: none;">
<ul>
<a><li>2누르면 나오는탭</li></a>
</ul>
</div>
</div>
스크립트에 첨부터 둘다 display: none; 도 주고싶은데
방법을 몰라서 그냥 style로 바로 none 해버렸어요 ㅠㅠ
참고할거 보내주시면 감사하겠습니다.
하고싶은건
1번 클릭하면 2번은 안보이고 1번만 보이고 그상태로 1번을 또누르면 1번이 접히고 2번안보이는 상태이고
2번을 클릭하면 1번 안보이고 2번만 보이고 그상태로 2번을 또 누르면 2번이 접히는...
확인해주신분들 감사합니다..!
답변 1
jquery의 :visible, :hidden 을 이용하시면 될꺼 같습니다.
탭을 눌렀을시 해당요소가 숨겨진상태라면 show하고 아니며 hide 하라고 하면되겟지요 ^^;
그 히든 쇼부분을 어느정도알겠는데요!
궁금한게 한번 더 누르면 접히게 하고 싶어요...
1메뉴 누르면 1메뉴하위가 나오고
다시 1메뉴 누르면 1메뉴하위가접히고
또는 1메뉴 하위가 열렸을때 2메뉴 누르면 1메뉴 닫히고 2메뉴하위가 열리고 2메뉴누르면 또 닫히고
이런 메뉴를 원하는데ㅠㅠ참고할거있나요...이것도 쇼랑 히든으로하면 될거같은데
두개일땐 코드작성을 어떻게 해야될지 예시좀 주실수있나요?ㅠㅠ 뭐라고 검색하고 찾아야될지를 모르겠어서ㅠㅠ...
show() hide()를 말하는게 아니라
:visible :hidden 를 말합니다. 링크를 보시면 이해 하시리라 생각했는데...
일단 단순하게 이런식으로 작동한다는것을 알려드리고자 적어드리구요.
응용해서 한번 해보셔요 ^^
<script>
$(function () {
$("ul.tabs li").click(function () {
var activeTab = $(this).attr("rel");
if( $("#" + activeTab).is(":visible") ) {
$(".tab_container ul li").fadeOut();
$("#" + activeTab).fadeOut('fast');
} else {
$(".tab_container ul li").fadeOut('fast');
$("#" + activeTab).fadeIn();
}
});
});
</script>
<div>
<ul class="tabs">
<li rel="tab1">탭1</li>
<li rel="tab2">탭2</li>
</ul>
</div>
<div class="tab_container">
<ul>
<li id="tab1" style="display: none;"><a>1누르면 나오는탭</a></li>
<li id="tab2" style="display: none;"><a>2누르면 나오는탭</a></li>
</ul>
</div>
감사합니다! 링크도 들어가서 잘 보구 여러번 해서 해보겠습니다 감사합니다!!