StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First of all, your HTML is invalid - you're closing <code><li></code> list items with <code></div></code> tags. You've also forgotten to close the quote surrounding the <code>#content</code> element's <code>id</code> attribute value. </p> <p>The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a <code>class</code> attribute, which certainly lightens up the HTML quite a bit: </p> <pre><code>// Select all of the tab contents, then hide them // Cache elements that need to be reused var tabContents = $(".tab_container, #side-img-container").children().hide(), tabs = $("ul.tabs li"); // Show the first tab's content, and add in the active class tabs.first().addClass("active"); tabContents.filter(':first-child').show(); // Attach click event handler tabs.click(function() { // Cache the clicked on tab element var $this = $(this), // Obtain the element index number activeTab = $this.index() + 1; // Only change tabs if the clicked tab isn't active if (!$this.hasClass('active')) { // Remove the 'active' class from the original anchor and add it to the current one $this.addClass('active').siblings().removeClass('active'); // Hide all of the other tabs and fade in the active one tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn(); } return false; }); </code></pre> <p>See a simple demo of this here: <a href="http://jsfiddle.net/ND7nU/" rel="nofollow">http://jsfiddle.net/ND7nU/</a></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