토글버튼을 누르면
기본으로 출력되어있는 <div id="tes1" class="h-full"> 이던 위젯을 숨기고
<div id="test2" class="h-full"> 로 체인지해서 출력하게 하고싶은데 어떤식으로 해야할까요?
|
답변 3개 / 댓글 1개
채택된 답변
+20 포인트
2021-07-11 (일) 20:47:11
원버튼
Copy
<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>토글버튼
Copy
<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>답변에 대한 댓글 1개
2021-07-11 (일) 19:14:18
Copy
<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>답변을 작성하려면 로그인이 필요합니다.