How to active second tab instead of first one using JavaScript?

Question

I am working on a project, where I want to show a second tab active on window load, but it always active the first tab.

Here is my script:

<script>
   $(document).ready(function() {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function() {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });
});
</script>

The problem is, when I write second in place of first it doesn't work.

Try using $('#tabs ul li').eq(1).addClass('active') instead — Justinas
– Justinas, Commented Aug 18, 2014 at 11:10
i tried this, and it works only for tabs, but i also want to show the content under active tab. which doesn't appear — Amrinder Singh
– Amrinder Singh, Commented Aug 18, 2014 at 11:12

Ram · Accepted Answer · 2014-08-18 11:14:11Z

1

Instead of using show and hide outside the click handler and repeating the logic, you can trigger the event for a specific a element:

var $a = $('#tabs ul li a').click(function() {
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});

$a.eq(1).click();

answered Aug 18, 2014 at 11:14

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ganesh Jadhav · Accepted Answer · 2014-08-18 11:12:23Z

0

Use the JQuery eq method, like this:

$(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div').eq(1).show();
    $('#tabs ul li').eq(1).addClass('active');
});

answered Aug 18, 2014 at 11:12

Ganesh Jadhav

2,8481 gold badge22 silver badges34 bronze badges

1 Comment

Amrinder Singh Over a year ago

it works, but only for tabs, i also want to show the content under it. the div i want to show doesn't appear when the current tab is active,

Collectives™ on Stack Overflow

How to active second tab instead of first one using JavaScript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related