-4

我无法在文档加载时触发点击事件到 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 触发“点击”,
  • window.location.href = "#tabUtilisateurs",
  • 编程一个事件(一个相当复杂的......)。

=> 什么都没发生!!

任何想法 ?

谢谢您的帮助 !!

PS 在关于 javascript 代码的评论之后:我的 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。

4

4 回答 4

0

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

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

只有两个选项卡;将来可能会有更多:我将放置一个开关/案例结构来显示正确的选项卡。

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

于 2013-01-04T21:13:22.587 回答
0

为什么不只显示您想要的选项卡而不是“单击”它?您是否正在尝试同时运行额外的代码?

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();
} 
于 2013-01-04T20:24:16.243 回答
-1

由于您还没有显示一些 JS 代码,所以我做了一个。click_tab选择所需的选项卡。

请参阅此JSFiddle

当您想在文档加载时选择一个选项卡时,只需click_tab()使用适当divid.

于 2013-01-04T19:26:19.877 回答
-1

获取链接并使用其默认的单击方法。

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

或者使用 jQuery

$("#TA").get(0).click();
于 2013-01-04T19:28:13.503 回答