Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can use hash tags to uniquely identify each tab, so <code>http://example.com/yourpage.html#current-points</code> takes you to the <code>current-points</code> tab, and <code>http://example.com/yourpage.html#my-details</code> takes you to the <code>my-details</code> tab. You can set the hash by assigning to <code>location.hash</code>, and of course you can read that on page load. This also has the huge advantage that your users can bookmark the tabs they want. You can use a path in the hash if you have tabs within tabs (so <code>#first/foo</code> takes you to the <code>first</code> tab and its <code>foo</code> subtab; <code>#first/bar</code> takes you to the <code>first</code> tab and its <code>bar</code> subtab).</p> <p>Here's a really basic example (without subtabs, but you get the idea):</p> <p><a href="http://jsbin.com/ugapax" rel="noreferrer">Live copy</a> | <a href="http://jsbin.com/ugapax/edit" rel="noreferrer">Live source</a></p> <p>HTML:</p> <pre><code>&lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#first"&gt;First&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#second"&gt;Second&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#third"&gt;Third&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="tab" id="tab-first"&gt;This is first&lt;/div&gt; &lt;div class="tab" id="tab-second"&gt;This is second&lt;/div&gt; &lt;div class="tab" id="tab-third"&gt;This is third&lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre><code>jQuery(function($) { $("&lt;p&gt;").html("Loaded at " + new Date()).appendTo( document.body ); showTab(location.hash || "first"); $("#nav a").click(function() { var hash = this.getAttribute("href"); if (hash.substring(0, 1) === "#") { hash = hash.substring(1); } location.hash = hash; showTab(hash); return false; }); function showTab(hash) { $("div.tab").hide(); $("#tab-" + hash).show(); } }); </code></pre> <p>Alternately (or in conjunction), you can set a cookie when they change tabs, and check for the cookie on page load to select the last tab they had selected.</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