Question

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.

http://jsfiddle.net/5nB4P/

HTML:

<div id="nav">
    <ul>
        <li><a href="#">First Tab</a></li>
        <li><a href="#">Second Tab</a></li>
        <li><a href="#">Third Tab</a></li>
    </ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>

Script:

$(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();
    })
})

Answer 1

There is a much better way to achieve this. Here you go

$(function() {
    $("li").click(function() {
       $(this).css("background","red").siblings().css("background","none");
       $(".tabs").hide().eq($(this).index()).show();
       return false;
    });
})

Working Demo

As @Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.

FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements