페이지 내에서 이동하는 방법??
본문
<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
#으로 이동하시고...
숨겨놓은 div는 스크립트등을 이용하여 display:block; 등으로 보여지도록 하시면 됩니다.
#으로 이동하는 방법을 좀 알수없을까요...
display: none
display:block 이용하면 되지 않을까요
jquery 로 click이나 hover 를 bind 하시면 될 것같아요
구조가 부트스트랩 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 버튼을 만들수도 있고요.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
이런식으로 스크립 했는데 잘 안되네요...
왜 안될까요 ㅜㅜ
일단 jquery 버전을 3버전으로 사용하시는데 그누보드에서 사용하시려면 충돌 방지나 마이그레이션을 하셔야 합니다. 그누보드에서는 1.8버전인가 사용하고 있을겁니다.
