-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"、
  • イベントのプログラミング（非常に複雑です...）。

=>何も起こらない!!

何か案が ？

ご協力ありがとうございました ！！

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を表示しませんでした。

4

4 に答える 4

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 に答える
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();
}

タブは2つだけです。将来的にはさらに増える可能性があります。右側のタブを表示するためのスイッチ/ケース構造を配置します。

みなさん、ありがとうございました!! 私はこのウェブサイトが大好きです!!

于 2013-01-04T21:13:22.587 に答える
-1

JSコードを表示していないので、これを作成しました。click_tab目的のタブを選択します。

このJSFiddleを参照してください。

ドキュメントの読み込み時にタブを選択する場合はclick_tab()、適切なdivのを使用して呼び出すだけidです。

于 2013-01-04T19:26:19.877 に答える
-1

リンクを取得し、デフォルトのクリック方法を使用します。

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

またはjQueryを使用

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