javascript - Displaying element on page load - using current URL -

i'm rusty @ javascript , html, , trying it.

here's sample code of element i'd modify:

      <div class="table">          <h1>container</h1>          <ul class="tabs">             <li><a href="#tab1">tab 1</a></li>             <li><a href="#tab2">tab 2</a></li>             <li><a href="#tab3">tab 3</a></li>                           </ul>          <div id="tab_container">             <div id="tab1" class="tab_content"></div>             <div id="tab2" class="tab_content"></div>             <div id="tab3" class="tab_content"></div>          </div>       </div> 

this simple tab structure i'm using. can control tab display.

i'd able control tab displayed when arriving on page, based on current page url. example, if url

.../index.html#2

i'd second tab shown. is possible using javascript?

you achieve simple css, using :target pseudo-selector:

.tab_content {     display: none; } .tab_content:target {     display: block; } 

or, if wanted use javascript:

.tab_content {     display: none; }  document.queryselector(document.location.hash).style.display = 'block'; 

or, perhaps:

array.prototype.foreach.call(document.queryselectorall('.tab_content'), function (tab) {     tab.style.display = tab.id === document.location.hash.substring(1) : 'block' : 'none'; }); 

references:

• css:
  • :target. javascript:
  • array.prototype.foreach().
  • urlutils.hash
  • function.prototype.call().