외부파일에서 특정 탭메뉴로 이동시키기
본문
<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 );