title: Change URL of the windows for every different Tab
body: <p>I have a single page html code with 3 different Tabs in that.I have a requirement of chaining the URL for each tab.</p>
  <p>I have seen some resources for changing the browser history using <code>windows.history.pushState()</code>.But as far as I know It only changes changing with <code>#extra-path</code>.</p>
  <p>But I am trying to achieve something like:</p>
  <blockquote>
  <p>for tab1 ..  mybasedomain.com/tab1</p>
  <p>for tab2 ..  mybasedomain.com/tab2</p>
  </blockquote>
  <p>How do I achieve it?Can I achieve it using JavaScript, jQuery?</p>
  <p>My code structure:</p>
  <pre><code>&lt;section id=&quot;features&quot;&gt;
      &lt;header&gt;
          &lt;div class=&quot;features-switcher&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;ul class=&quot;tab-links&quot;&gt;
                      &lt;li&gt;
                          &lt;a class=&quot;active&quot; href=&quot;#tab1&quot;&gt;
                              &lt;span&gt;tab one&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li &gt;
                          &lt;a class=&quot;&quot; href=&quot;#tab2&quot;&gt;
                              &lt;span&gt;tab two&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class=&quot;&quot; href=&quot;#tab3&quot;&gt;
                              &lt;span&gt;tab three&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr&gt;
      &lt;/header&gt;
      &lt;div class=&quot;tab-content&quot;&gt;
      &lt;div id=&quot;tab1&quot; class=&quot;tab--active&quot;&gt;
          &lt;section class=&quot;container&quot;&gt;
              &lt;h2&gt; content of tab 1&lt;/h2&gt;
          &lt;hr&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;div id=&quot;tab2&quot; class=&quot;tab--inactive&quot;&gt;
          &lt;section class=&quot;container&quot;&gt;
              &lt;h2&gt; content of tab 2&lt;/h2&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;div id=&quot;tab3&quot; class=&quot;tab--inactive&quot;&gt;
          &lt;section class=&quot;container&quot;&gt;
              &lt;h2&gt; content of tab 3&lt;/h2&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>