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

  1. /**
  2.  * cbpFWTabs.js v1.0.0
  3.  * <a href="http://www.codrops.com" target="_blank">http://www.codrops.com</a>
  4.  *
  5.  * Licensed under the MIT license.
  6.  * <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">http://www.opensource.org/licenses/mit-license.php</a>
  7.  *
  8.  * Copyright 2014, Codrops
  9.  * <a href="http://www.codrops.com" target="_blank">http://www.codrops.com</a>
  10.  */
  11. ;( function( window ) {
  12.  
  13. 'use strict';
  14.  
  15. function extend( a, b ) {
  16. for( var key in b ) {
  17. if( b.hasOwnProperty( key ) ) {
  18. a[key] = b[key];
  19. }
  20. }
  21. return a;
  22. }
  23.  
  24. function CBPFWTabs( el, options ) {
  25. this.el = el;
  26. this.options = extend( {}, this.options );
  27. extend( this.options, options );
  28. this._init();
  29. }
  30.  
  31. CBPFWTabs.prototype.options = {
  32. start : 0
  33. };
  34.  
  35. CBPFWTabs.prototype._init = function() {
  36. // tabs elemes
  37. this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
  38. // contentt items
  39. this.items = [].slice.call( this.el.querySelectorAll( '.contentt > section' ) );
  40. // current index
  41. this.current = -1;
  42. // show current contentt item
  43. this._show();
  44. // init events
  45. this._initEvents();
  46. };
  47.  
  48. CBPFWTabs.prototype._initEvents = function() {
  49. var self = this;
  50. this.tabs.forEach( function( tab, idx ) {
  51. tab.addEventListener( 'click', function( ev ) {
  52. ev.preventDefault();
  53. self._show( idx );
  54. } );
  55. } );
  56. };
  57.  
  58. CBPFWTabs.prototype._show = function( idx ) {
  59. if( this.current >= 0 ) {
  60. this.tabs[ this.current ].className = '';
  61. this.items[ this.current ].className = '';
  62. }
  63. // change current
  64. this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
  65. this.tabs[ this.current ].className = 'tab-current';
  66. this.items[ this.current ].className = 'contentt-current';
  67. };
  68.  
  69. // add to global namespace
  70. window.CBPFWTabs = CBPFWTabs;
  71.  
  72. })( window );



  1. <div id="tabs" class="tabs">
  2. <nav>
  3. <ul>
  4. <li><a href="#section-1"><span>2016</span></a></li>
  5. <li><a href="#section-2"><span>2015</span></a></li>
  6. </ul>
  7. </nav>
  8. <div class="content">
  9. <section id="section-1">
  10. <div class="mediabox">
  11. <img src="imgages/pozar.png" alt="img01" />
  12. <h3>Pożary:</h3>
  13. <p>0</p>
  14. </div>
  15. <div class="mediabox">
  16. <img src="imgages/wypadek.png" alt="img01" />
  17. <h3>Wypadki:</h3>
  18. <p>0</p>
  19. </div>
  20. <div class="mediabox">
  21. <img src="imgages/mz.png" alt="img01" />
  22. <h3>Miejscowe zagrożenia:</h3>
  23. <p>0</p>
  24. </div>
  25. <div class="mediabox">
  26. <img src="imgages/fa.png" alt="img01" />
  27. <h3>Fałszywe alarmy:</h3>
  28. <p>0</p>
  29. </div>
  30. <nav>
  31. <ul>
  32. <li><a href="#section-1"><span>2016</span></a></li>
  33. <li><a href="#section-2"><span>2015</span></a></li>
  34. </ul>
  35. </nav>
  36. </section>
  37. <section id="section-2">
  38. <div class="mediabox">
  39. <img src="imgages/pozar.png" alt="img01" />
  40. <h3>Pożary:</h3>
  41. <p>0</p>
  42. </div>
  43. <div class="mediabox">
  44. <img src="imgages/wypadek.png" alt="img01" />
  45. <h3>Wypadki:</h3>
  46. <p>0</p>
  47. </div>
  48. <div class="mediabox">
  49. <img src="imgages/mz.png" alt="img01" />
  50. <h3>Miejscowe zagrożenia:</h3>
  51. <p>0</p>
  52. </div>
  53. <div class="mediabox">
  54. <img src="imgages/fa.png" alt="img01" />
  55. <h3>Fałszywe alarmy:</h3>
  56. <p>0</p>
  57. </div>
  58. <nav>
  59. <ul>
  60. <li><a href="#section-1"><span>2016</span></a></li>
  61. <li><a href="#section-2"><span>2015</span></a></li>
  62. </ul>
  63. </nav>
  64. </section>
  65. </div><!-- /content -->
  66. </div><!-- /tabs -->
  67. <script src="js/cbpFWTabs.js"></script>
  68. <script>
  69. new CBPFWTabs( document.getElementById( 'tabs' ) );
  70. </script>


Ktoś pomoże ?