Question

我无法在文档加载时触发点击事件到href。

我读了一些答案，但没有人工作。这是因为我以特定的方式使用thiese;这是模拟标签。

这是我的HTML代码：

<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>

用于模拟标签的css代码：

#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;     
}

（我在互联网上找到它：它工作正常！）

默认情况下，显示“tabArticles”。但有时我想在文档加载时显示“TabUtilisateurs”。我试着用：

使用jQuery触发'click'，
window.location.href =“＃tabUtilisateurs”，
编写一个事件（非常复杂......）。

=＆GT;什么都没发生!!

有什么想法吗？

感谢您的帮助!!

关于javascript代码的评论后PS：我的javascript代码很重（jQuery-ui对话框表单和jqGrids）并且有效。趋势部分（标签是主题）就像：

$(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 .....

}

我确切地说，我只想显示“tabUtilisateurs”标签而不用真正的鼠标点击它，而是通过任何方式模拟这个。我正在寻找好的javascript代码;这就是为什么我没有首先向你展示任何javascript。

Answer 1

为什么不显示您想要的标签而不是“点击”它？是否有额外的代码试图同时运行？

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

Answer 2

我只在页面加载开始时对选项卡进行控制：

if($("#fonction").text() == "user") { // Affichage de l'onglet Utilisateurs
    $('#tabs li a:not(#TU)').addClass('inactive');
    $('.container:not(#tabUtilisateurs)').hide();
} else {
    $('#tabs li a:not(:first)').addClass('inactive');
    $('.container:not(:first)').hide();
}

只有两个标签;它可能会在未来有更多：我将放置一个开关/案例结构来显示正确的标签。

谢谢大家!!我喜欢这个网站!!

Answer 3

由于你没有展示一些JS代码，我把它做了。 click_tab选择所需的标签。

见JSFiddle。

如果您想在文档加载时选择标签，只需使用相应的click_tab() div拨打id。

Answer 4

获取链接并使用其默认点击方式。

document.getElementById("TA").click();

或者使用jQuery

$("#TA").get(0).click();

如何使用jQuery模拟对href的点击

4 个答案: