Show First Tab When Page Is Loaded

Question

I hope somebody can help me to load the first tab (make it active) when the page is loaded. Now the jquery tabs only works fine after clicking. I'm using this code: HTML

Solution 1:

$(document).ready(function() {
    $('.link:first').addClass('active');
});

Solution 2:

I would encapsulate the display logic;

functionshowTab(jqEl) {
    var content = jqEl.attr('rel');
    $('.active').removeClass('active');
    jqEl.addClass('active');
    $('.content5').hide();
    $('#' + content).show();
};

The call as needed;

$('.link').click(function(e) {
    e.preventDefault();
    showTab($(this));
});

and

$().ready(function() {
  showTab($(".link[rel=div1]")); //or better
});

Solution 3:

You can trigger a click on the first link after the binding:

$('.link')
    .click(function(e) {
        ...
    })
    .first().click(); // or .trigger('click')

.click() / .trigger('click')

Solution 4:

Just use HTML and CSS to make it visible, i.e:

Tab 1 Tab 2

Baca Juga

Content of Tab 1 Content of Tab 2

So the first link starts out with a class of active, and the first tab starts out as visible via display:block.

Solution 5:

Can you wrap the Code in a function? call the function from inside the event, passing in thr object $(this). Call the function on page load passing in ('.link').first()

javascript dox