토글버튼 질문 드립니다.
본문
토글버튼을 누르면
기본으로 출력되어있는 <div id="tes1" class="h-full"> 이던 위젯을 숨기고
<div id="test2" class="h-full"> 로 체인지해서 출력하게 하고싶은데 어떤식으로 해야할까요?
답변 3
원버튼
<button style=cursor:pointer onclick=toggle()>위젯바꾸기</button>
<div id="test1" class="h-full">1번위젯</div>
<div id="test2" class="h-full" style=display:none>2번위젯</div>
<script>
mode = true;
function toggle() {
if (mode) test1.style.display = 'none', test2.style.display = 'block'
else test1.style.display = 'block', test2.style.display = 'none';
mode = !mode
}
</script>
토글버튼
<button id=toggleBtn style=cursor:pointer onclick=toggle()>2번위젯</button>
<div id="test1" class="h-full">1번위젯</div>
<div id="test2" class="h-full" style=display:none>2번위젯</div>
<script>
mode = true;
function toggle() {
if (mode) test1.style.display = 'none', test2.style.display = 'block', toggleBtn.innerText = '1번위젯';
else test1.style.display = 'block', test2.style.display = 'none', toggleBtn.innerText = '2번위젯';
mode = !mode
}
</script>
감사합니다!!!
<script>
$(function() {
$('#test0').on('click', function() {
var status = $(this).data('status');
var state = $('#tes1').css('display');
if (status == 'none'||state == 'none') {
$(this).data('status', 'block');
$(this).text('test2');
$('#tes1').show();
$('#tes2').hide();
} else {
$(this).data('status', 'none');
$(this).text('test1');
$('#tes2').show();
$('#tes1').hide();
}
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
