외부파일에서 특정 탭메뉴로 이동시키기

외부파일에서 특정 탭메뉴로 이동시키기

QA

외부파일에서 특정 탭메뉴로 이동시키기

본문

<a href="corp_introduce.php#seection-2">

으로 하여도 #seection-1 탭으로만 가네요. 도움을 부탁드립니다.

-------------------------------------------------------------------------------------
corp.introduce.php 부분
-------------------------------------------------------------------------------------

<div id="content">
<div class="tab_container">

 <div class="nonameee">
  <div id="taabbss" class="taabbss">
   <nav>
    <ul>
     <li><a href="#seection-1"><span>첫번째</span></a></li>
     <li><a href="#seection-2"><span>두번째</span></a></li>
     <li><a href="#seection-3"><span>세번째</span></a></li>
    </ul>
   </nav>
   
   <div class="coonntteenntt">
    <section id="seection-1">
     <div class="mediabox">
      <div class="my-con-box">
       <h3 class="middletxt">첫번째</h3>
      </div>
     </div>
   </div>
    </section>
    
   <div class="coonntteenntt">
    <section id="seection-2">
     <div class="mediabox">
      <div class="my-con-box">
       <h3 class="middletxt">두번째</h3>
      </div>
     </div>
   </div>
    </section>
    
   <div class="coonntteenntt">
    <section id="seection-3">
     <div class="mediabox">
      <div class="my-con-box">
       <h3 class="middletxt">세번째</h3>
      </div>
     </div>
   </div>
    </section>  
    
 <script src="../css/cbpFWTabs.js"></script>
 <script>
  new CBPFWTabs( document.getElementById( 'taabbss' ) );
 </script>

</div>
</div>


-------------------------------------------------------------------------------------
cbpFWTabs.js 부분
-------------------------------------------------------------------------------------;( function( window ) {
 
 'use strict';

 function extend( a, b ) {
  for( var key in b ) {
   if( b.hasOwnProperty( key ) ) {
    a[key] = b[key];
   }
  }
  return a;
 }

 function CBPFWTabs( el, options ) {
  this.el = el;
  this.options = extend( {}, this.options );
    extend( this.options, options );
    this._init();
 }

 CBPFWTabs.prototype.options = {
  start : 0
 };

 CBPFWTabs.prototype._init = function() {
  // tabs elemes
  this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
  // coonntteenntt items
  this.items = [].slice.call( this.el.querySelectorAll( '.coonntteenntt > section' ) );
  // current index
  this.current = -1;
  // show current coonntteenntt item
  this._show();
  // init events
  this._initEvents();
 };

 CBPFWTabs.prototype._initEvents = function() {
  var self = this;
  this.tabs.forEach( function( tab, idx ) {
   tab.addEventListener( 'click', function( ev ) {
    ev.preventDefault();
    self._show( idx );
   } );
  } );
 };

 CBPFWTabs.prototype._show = function( idx ) {
  if( this.current >= 0 ) {
   this.tabs[ this.current ].className = '';
   this.items[ this.current ].className = '';
  }
  // change current
  this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
  this.tabs[ this.current ].className = 'tab-current';
  this.items[ this.current ].className = 'coonntteenntt-current';
 };

 // add to global namespace
 window.CBPFWTabs = CBPFWTabs;

})( window );
 

이 질문에 댓글 쓰기 :

답변 1

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

회원로그인

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