<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
이런식으로 href=#id 값을 주면 페이지 내에서 이동 없이
div 를 불러올 수 있나요??
한 페이지에서 숨겨놓은 div를 들고오고 싶은데
이럴때는 어떻게 하면 되나요??
답변 3개 / 댓글 3개
#으로 이동하시고...
숨겨놓은 div는 스크립트등을 이용하여 display:block; 등으로 보여지도록 하시면 됩니다.
답변에 대한 댓글 1개
구조가 부트스트랩 tab 형식같으시네요.
부트스트랩 tab 형식을 쓰실거면 부트스트랩에서 다운받아 쓰시면됩니다.
tab에 관련된 스크립트와 스타일만 뽑아서 쓰시면 되겠지요.
링크를 이용해서 어떤 요소들을 보이거나 숨기는 방식은 여러가지입니다.
가령,
<a href="#aaa" class="btn-toggle">A부르기</a>
<div id="aaa">
내용
</div>
<script>
$(function(){
$('.btn-toggle').on('click',function(){
$this = $(this);
var targetElem = $this.attr('href');
$(targetElem).toggleClass('active');
return false;
});
});
</script>
<style>
#aaa {display:none}
#aaa.active {display:block}
</style>
위와 같이 jquery를 이용해 toggle 버튼을 만들수도 있고요.
답변에 대한 댓글 2개
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
이런식으로 스크립 했는데 잘 안되네요...
왜 안될까요 ㅜㅜ
display: none
display:block 이용하면 되지 않을까요
jquery 로 click이나 hover 를 bind 하시면 될 것같아요
답변을 작성하려면 로그인이 필요합니다.