如何使用 jQuery 模拟单击 href [关闭]答案

【问题标题】：how to simulate a click on a href with jQuery [closed]如何使用 jQuery 模拟单击 href [关闭]
【发布时间】：2012-12-19 06:26:41
【问题描述】：

我无法在文档加载时触发单击链接的事件。

我阅读了一些答案，但没有人工作。这是因为我以一种特殊的方式使用 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 触发“点击”，
window.location.href = "#tabUtilisateurs",
编写一个事件（相当复杂...）。

=> 什么都没发生！！

有什么想法吗？

感谢您的帮助！！

关于 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。

【问题讨论】：

你能展示一下你的点击事件是什么样子的吗？你是如何尝试触发它的？
你没有向我们展示脚本......
您需要显示 JavaScript 代码。在没有看到它的情况下，我的猜测是您在插件将事件绑定到元素之前触发了点击事件。
添加了 JavaScript 代码。但是我找到了它不起作用的原因：点击触发得太早。当页面的所有元素都加载完毕时，导航器接受触发点击。使用超时 (setTimeout)，它适用于任何方法：标准 javascript 或 jquery。我会给出一个答案。谢谢！！

标签： jquery href eventtrigger

【解决方案1】：

由于你没有展示一些 JS 代码，我做了一个。 click_tab 选择所需的选项卡。

看到这个JSFiddle。

如果您想在文档加载时选择一个选项卡，只需调用 click_tab() 并使用相应的 div 的 id。

【讨论】：

它可以工作，但我必须等待页面的完整加载。感谢您的工作和答案！ ^_^

【解决方案2】：

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

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

或者使用 jQuery

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

【讨论】：

在页面完全加载后执行时，两者都在工作。看我的回答。我感谢你的帮助！但是会显示错误的选项卡，一秒钟后会显示正确的选项卡。不是很漂亮，不过是个绕道。

【解决方案3】：

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

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

【讨论】：

为什么？因为我很笨！！哈哈。非常简单，可能非常有效：我现在就试试。我很快就会给你一个状态！
这是正确的轨道！我更改了“隐藏”部分的第一行：$('#tabs li a').filter(':not(.inactive)').addClass('inactive');。我现在有一个显示问题：如果我不单击选项卡，则不会显示标签的内容。我一直在努力……
我找到了！！看看我自己的回答......谢谢：你是给我正确轨道的人。
很高兴我能给你另一个视角。

【解决方案4】：

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

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

只有两个标签；将来可能会有更多：我将放置一个 switch/case 结构来显示正确的选项卡。

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

【讨论】：