title: How to load page without refresh using tabs?
body: <p>i was trying hard to find solution to this problem but im really lost . the problem is im trying to play video on 1 tab when i move to tab 2 i can still hear the video playing in tab 1 .and if i do click the same tab it doesn't load again . is there solution to this ? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.idTabs {padding-left:0px !important;}
  .idTabs li {display:inline;padding-left:0px;}
  .idTabs li a {
      padding:5px 15px;
      background-color:#2EA537;
      color:white;
      text-decoration:none;
      -webkit-transition:all 0.3s;
      -moz-transition:all 0.3s;
      -ms-transition:all 0.3s;
      -o-transition:all 0.3s;
      font-weight:bold;
      border:1px solid transparent;
      border-radius:10px 10px 0px 0px;
  }
  .idTabs li a:hover {
      padding:5px 15px;
      background-color:#805D5A;
      color:white;
      text-decoration:none;
  }
  .idTabs li a.selected {
      background-color:#42BEF8;
  }
  .idTabs li a.selected:hover {
      background-color:#42BEF8;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://2ytube.com/jscripts/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://2ytube.com/templates/dark/idTabs-stramaxon.js"&gt;&lt;/script&gt;
  &lt;ul class="idTabs"&gt; &lt;li&gt;&lt;a href="#tab1" class="selected"&gt;tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;tab 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab3"&gt;tab 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab4"&gt;tab 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab5"&gt;tab 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tab1" style="display: block;"&gt;  &lt;iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;&lt;/div&gt; &lt;div id="tab2" style="display: none;"&gt;   &lt;iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/HMjQygwPI1c" allowfullscreen frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;&lt;/div&gt; &lt;div id="tab3" style="display: none;"&gt;   &lt;iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;&lt;/div&gt; &lt;div id="tab4" style="display: none;"&gt;   &lt;iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;&lt;/div&gt; &lt;div id="tab5" style="display: none;"&gt;   &lt;iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"&gt;&lt;/iframe&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>I am begginer in ajax.</p>
  
  <p>Thanks.</p>
  
  <p><a href="https://codepen.io/AtotheK/pen/LwbKWe" rel="nofollow noreferrer">Codepen</a></p>