how to simulate a click on a href with jQuery

Question

I can't trigger a click event to a href on document load.

I read some answers but no one works. It's because I'm using thiese in a particular way ; it's for simulate tabs.

Here is my html code :

<div align="center">
    <ul id="tabs">
      <li><a href="#tabArticles" id="TA">Articles</a></li>
      <li><a href="#tabUtilisateurs" id="TU">Utilisateurs</a></li>
    </ul>
    <div class="container" id="tabArticles">
    ....
    </div>
    <div class="container" id="tabUtilisateurs">
    ....
    </div>
</div>

The css code to simulate tabs :

#tabs {
    border:0px; 
    height:0px;  
    padding-top:0px;
    -moz-box-shadow: inset 0 -2px 2px #dadada;
    -webkit-box-shadow:inset  0 -2px 2px #dadada;
    box-shadow: inset 0 -2px 2px #dadada;
    border-top-left-radius:4px;  
    border-top-right-radius:4px;
}
#tabs li {
    float:left; 
    list-style:none; 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    border-right:1px solid #ccc; 
    margin-right:5px; 
    border-top-left-radius:3px;  
    border-top-right-radius:3px;
    -moz-box-shadow: 0 -2px 2px #dadada;
    -webkit-box-shadow:  0 -2px 2px #dadada;
    box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
    font-weight:bold; 
    color:#000000; 
    padding:7px 14px 6px 12px; 
    display:block; 
    background:#dddddd;  
    border-top-left-radius:3px; 
    border-top-right-radius:3px; 
    text-decoration:none;
    background: -moz-linear-gradient(top, #ebebeb, #cccccc 10%);  
    background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(#cccccc));  
    border-top: 1px solid white; 
    text-shadow:-1px -1px 0 #fff;
    outline:none;
}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:5px;
    color:#bbbbbb;
    background: -moz-linear-gradient(top, #dedede, #cccccc 75%);  
    background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
    border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
    border-top: 1px solid #dedede;
    color:#000000;
}


.container{ 
    clear:both;          
    padding:10px 0px; 
    width:1110px; 
    background-color:#ccc; 
    text-align:left;     
}

(I found it in internet : it works fine !)

By default, the "tabArticles" is diplayed. But sometimes I want to display "TabUtilisateurs" on document load. I try with :

• triggering 'click' with jQuery,
• window.location.href = "#tabUtilisateurs",
• programming a event (a quite complex...).

=> Nothing happends !!

Any idea ?

Thank you for your help !!

PS after remarks about javascript code : My javascript code is very heavy (jQuery-ui dialog forms and jqGrids) and works. The interessing part (where tabs are the subject) is like that :

$(function() {
    var largeurTab = Math.round((screen.width - 1120) / 2) + 50; // Où doivent se situer les onglets

    $('#tabs li a:not(:first)').addClass('inactive');
    $('.container:not(:first)').hide();

    $('#tabs').css("padding-left", largeurTab);

    if($("#fonction").text() == "user") { // Affichage de l'onglet Utilisateurs - this test works !
        var href = $("#TU").attr('href');
        alert("href = " + href);
        window.location.href = href;
    } 

.... here the dialogs, grids, and so on .....

}

I precise that I only want to display the "tabUtilisateurs" tab without a real mouse click on it but by simulating this by any mean. I'm seaching for the good javascript code ; it's why I didn't show you any javascript first.

Answer 1

why not just display the tab you want rather than 'click' it? Is there extra code you are trying to get run at the same time?

if($("#fonction").text() == "user") { // Affichage de l'onglet Utilisateurs - this test works !
    //hide current tab
    $('#tabs li a').filter('.inactive').addClass('inactive');
    $('.container:visible').hide();
    //show new tab
    $('#tabs li a#TA').removeClass('inactive');
    $('.container#TA').show();
}