title: Using javascript function parameters to show jquery tabs
body: <p>Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.</p>
  
  <p><a href="http://jsfiddle.net/5nB4P/" rel="nofollow">http://jsfiddle.net/5nB4P/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;First Tab&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Second Tab&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Third Tab&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  &lt;div class="tabs first"&gt;First Div content&lt;/div&gt;
  &lt;div class="tabs"&gt;Second Div content&lt;/div&gt;
  &lt;div class="tabs"&gt;Third Div content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$(function() {
      $("li :eq(0)").click(function() {
              $("li").css("background","none");
              $(this).css("background","red");
              $(".tabs:gt(0)").hide();
              $(".tabs:eq(0)").show();
      })
      $("li :eq(1)").click(function() {
      $("li").css("background","none");
              $(this).css("background","red");
      $(this).css("background","red")
              $(".tabs:gt(1), .tabs:lt(1)").hide();
              $(".tabs:eq(1)").show();
      })
      $("li :eq(2)").click(function() {
      $("li").css("background","none");
              $(this).css("background","red");
              $(".tabs:lt(2)").hide();
              $(".tabs:eq(2)").show();
      })
  })
  </code></pre>