페이지 내에서 이동하는 방법??

페이지 내에서 이동하는 방법??

QA

페이지 내에서 이동하는 방법??

본문

  <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; 등으로 보여지도록 하시면 됩니다.

 

 

구조가 부트스트랩 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버전인가 사용하고 있을겁니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 141
QA 내용 검색
filter #div ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT