Databases
StackOverflow2013
Postsdbo
POHow to show() a <div> based on label specified in url using javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to show() a <div> based on label specified in url using javascript
    text
    copied!<p>My html for a tabbed menu and its content:</p> <pre><code>&lt;div class="tab-menu"&gt; &lt;!-- menu --&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tab1"&gt;link to tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;link to tab 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab3"&gt;link to tab 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="tab-wrapper"&gt; &lt;!-- content --&gt; &lt;!-- BEGIN FIRST TAB --&gt; &lt;div id="tab1" class="tab"&gt;first tab content&lt;/div&gt; &lt;div id="tab2" class="tab"&gt;second tab content&lt;/div&gt; &lt;div id="tab3" class="tab"&gt;third tab content&lt;/div&gt; &lt;/div&gt; </code></pre> <p>... and the script to make the menu work is</p> <pre><code> // Displays the first tab when $(".tabs").each(function(){ $(this).find(".tab").hide(); $(this).find(".tab-menu li:first a").addClass("active").show(); $(this).find(".tab:first").show(); }); $(".tabs").each(function(){ $(this).find(".tab-menu a").click(function() { $(this).parent().parent().find("a").removeClass("active"); $(this).addClass("active"); $(this).parent().parent().parent().parent().find(".tab").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </code></pre> <p>The menu works when user clicks a tab. This means the menu opens up with the first <code>&lt;div&gt;</code> visible by default and when the user clicks another tab, that corresponding <code>&lt;div&gt;</code> appears just as expected. However, when I type in the url <code>mysite/path#tab2</code>, it still opens up with tab1 open. What do I need to do to make it open with tab2? Specifically, how do I access the url and extract the label? I want to do this in javascript</p> <p>EDIT: It seems <code>document.location.href</code> provides the full url. How do I parse and extract the label from this url?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload