Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>See, for your question of implementing tabs, I can suggest you to do in a better way. The same clicker function can take an argument of the <code>ID</code> of the <code>DIV</code> and you can pass it when you are calling it.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;Tabs&lt;/title&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;style type="text/css"&gt; .web_index div {width: 400px; height: 300px; background: #eee;} ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li onclick="clicker(1)"&gt;one&lt;/li&gt; &lt;li onclick="clicker(2)"&gt;two&lt;/li&gt; &lt;li onclick="clicker(3)"&gt;three&lt;/li&gt; &lt;/ul&gt; &lt;div class="web_index"&gt; &lt;div id="t1"&gt;content one&lt;/div&gt; &lt;div id="t2"&gt;content two&lt;/div&gt; &lt;div id="t3"&gt;content three&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; function clicker(tab){ document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; document.getElementById("t3").style.display = "none"; document.getElementById("t" + tab).style.display = "block"; } clicker(1); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <h3>Working</h3> <p>Instead of finding the <code>index</code> of the element occurrence, we can give a Unique ID to each. Then, functions support arguments, and that is what javascripts are for. Pass that argument and set the style using <code>.style.display</code> of the element.</p> <p>We don't need to position the tabs as absolute, because it is not going to be hanging. And, you can set the margins using <code>display: inline-block</code> instead of <code>float: left</code>.</p> <pre><code>.web_index div {width: 400px; height: 300px; background: #eee;} ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;} </code></pre> <p>You can rewrite the <code>clicker()</code> script this way:</p> <pre><code>function clicker(tab){ document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; document.getElementById("t3").style.display = "none"; document.getElementById("t" + tab).style.display = "block"; } </code></pre> <p>So that, you can pass the <code>ID</code> of the <code>DIV</code> tag as a parameter. By modifying the <code>style</code> properties of the element, you can either hide or show.</p> <p>You can call this in the <code>&lt;li&gt;</code> using the same <code>onclick</code> function but just passing another extra parameter:</p> <pre><code>&lt;ul&gt; &lt;li onclick="clicker(1)"&gt;one&lt;/li&gt; &lt;li onclick="clicker(2)"&gt;two&lt;/li&gt; &lt;li onclick="clicker(3)"&gt;three&lt;/li&gt; &lt;/ul&gt; </code></pre> <h3>Check out demo at: <a href="http://jsbin.com/welcome/22513" rel="nofollow">http://jsbin.com/welcome/22513</a></h3>
 

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