/** * cbpFWTabs.js v1.0.0 * <a href="http://www.codrops.com" target="_blank">http://www.codrops.com</a> * * Licensed under the MIT license. * <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">http://www.opensource.org/licenses/mit-license.php</a> * * Copyright 2014, Codrops * <a href="http://www.codrops.com" target="_blank">http://www.codrops.com</a> */ ;( function( window ) { 'use strict'; function extend( a, b ) { } } 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' ) ); // contentt items this.items = [].slice.call( this.el.querySelectorAll( '.contentt > section' ) ); // current index // show current contentt 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 ) { } // change current this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; }; // add to global namespace window.CBPFWTabs = CBPFWTabs; })( window );
<div id="tabs" class="tabs"> <nav> <ul> <li><a href="#section-1"><span>2016</span></a></li> <li><a href="#section-2"><span>2015</span></a></li> </ul> </nav> <div class="content"> <section id="section-1"> <div class="mediabox"> <img src="imgages/pozar.png" alt="img01" /> <h3>Pożary:</h3> <p>0</p> </div> <div class="mediabox"> <img src="imgages/wypadek.png" alt="img01" /> <h3>Wypadki:</h3> <p>0</p> </div> <div class="mediabox"> <img src="imgages/mz.png" alt="img01" /> <h3>Miejscowe zagrożenia:</h3> <p>0</p> </div> <div class="mediabox"> <img src="imgages/fa.png" alt="img01" /> <h3>Fałszywe alarmy:</h3> <p>0</p> </div> <nav> <ul> <li><a href="#section-1"><span>2016</span></a></li> <li><a href="#section-2"><span>2015</span></a></li> </ul> </nav> </section> <section id="section-2"> <div class="mediabox"> <img src="imgages/pozar.png" alt="img01" /> <h3>Pożary:</h3> <p>0</p> </div> <div class="mediabox"> <img src="imgages/wypadek.png" alt="img01" /> <h3>Wypadki:</h3> <p>0</p> </div> <div class="mediabox"> <img src="imgages/mz.png" alt="img01" /> <h3>Miejscowe zagrożenia:</h3> <p>0</p> </div> <div class="mediabox"> <img src="imgages/fa.png" alt="img01" /> <h3>Fałszywe alarmy:</h3> <p>0</p> </div> <nav> <ul> <li><a href="#section-1"><span>2016</span></a></li> <li><a href="#section-2"><span>2015</span></a></li> </ul> </nav> </section> </div><!-- /content --> </div><!-- /tabs --> <script src="js/cbpFWTabs.js"></script> <script> new CBPFWTabs( document.getElementById( 'tabs' ) ); </script>
Ktoś pomoże ?