Pastable version of Tab-Switching in jQuery

<pre class='prettyprint' language='javascript'>&lt;div id=&quot;showcase&quot;&gt;
  &lt;ul class=&quot;nav&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#example&quot; class=&quot;selected&quot;&gt;Example&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#another&quot;&gt;Another&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class=&quot;first item&quot; id=&quot;example&quot;&gt;
    This is the first item. By default it's shown.
  &lt;/div&gt;
  
  &lt;div class=&quot;item&quot; id=&quot;another&quot;&gt;
    This is another item. By default it's hidden.
  &lt;/div&gt;
&lt;/div&gt;</pre>
<pre class='prettyprint' language='javascript'>#showcase .item {
  display: none;
}

#showcase .first {
  display: block;
}</pre>
<pre class='prettyprint' language='javascript'>$(document).ready(function() {
  var selected = $(&quot;#showcase .first&quot;); // First is selected by default
  
  $(&quot;#showcase .nav a&quot;).click( function() {
    if($(this) != selected) {
      $('#showcase .nav a.selected').removeClass('selected');
      selected.hide();
      selected = $($(this).attr('href'));
      selected.show();
      $(this).addClass('selected');
      return false; // Stops link from jumping to the anchor
    }
  })
});</pre>
<a href="http://www.refactormycode.com/codes/608-tab-switching-in-jquery" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://www.refactormycode.com/images/small_logo.gif" style="border:0" /></a>

Refactor :my => 'code'

Recent

Popular

Pastable version of Tab-Switching in jQuery