title: How to change HTML content based on URL?
body: <p>I have a HTML page where I have two IFrames, and there are two buttons controlling which of them is visible.</p>
  
  <p>Here is the <code>index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;MyPage&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body onload="init()"&gt;
    &lt;div class="main"&gt;
      &lt;div class="leftbar"&gt;
          &lt;button id="btn_1" class="leftbar-button" onclick="openTab(event, 'sec1')"&gt;Section1&lt;/button&gt;
          &lt;button id="btn_2" class="leftbar-button" onclick="openTab(event, 'sec2')"&gt;Section2&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="sec1" class="tabcontent"&gt;
        &lt;iframe src="section1.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
      &lt;div id="sec2" class="tabcontent"&gt;
        &lt;iframe src="section2.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;    
    &lt;/div&gt;
  
    &lt;div id="clear" class="clear" style="clear: both; height: 0;"&gt;&lt;/div&gt;
  
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the <code>main.js</code>:</p>
  
  <pre><code>function onSwInit()
  {
      // Set the home page to be displayed
      document.getElementById("sec1").style.display = "block";
      document.getElementById("btn_1").className += " active";
  }
  
  function openTab(evt, tabName)
  {
    // Hide all content
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i &lt; tabcontent.length; i++)
    {
      tabcontent[i].style.display = "none";
    }
  
    // Display the clicked section
    tablinks = document.getElementsByClassName("leftbar-button");
    for (i = 0; i &lt; tablinks.length; i++)
    {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  </code></pre>
  
  <p>Now, as one can see, by default, the page begins with btn_1 active and the corresponding IFrame <code>section1.html</code> visible. Now the problem is, suppose I want to share the URL of the page with the IFrame <code>section2.html</code> visible, how do I do it?</p>
  
  <p>I am fine with a HTML, Javascript or PHP solution.</p>