Witam używam tego skryptu który zmienia zawartość diva bez odświeżania strony jednak potrzebuję aby w tej sekcji też się treść zmieniała bez odświeżania
/**
* 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 ) {
if( b
.hasOwnProperty
( 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' ) );
// 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 ) {
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
= 'contentt-current'; };
// 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 ?