如何模擬與jQuery的href點擊

-4

我無法在文檔加載時觸發點擊事件到href。如何模擬與jQuery的href點擊

我讀了一些答案，但沒有人工作。這是因爲我以特定的方式使用了蒂埃斯;它用於模擬標籤。

這裏是我的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」是diplayed。但有時我想在文檔加載時顯示「TabUtilisateurs」。我嘗試：

觸發 '點擊' 使用jQuery，
window.location.href = 「#tabUtilisateurs」
編程事件（一個相當複雜的...）。

=>什麼都沒發生！

有什麼想法？

謝謝你的幫助！

PS關於javascript代碼的評論：我的javascript代碼非常沉重（jQuery-ui對話框形式和jqGrids）並且工作正常。該interessing部分（其中標籤是主體）就是這樣：

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

來源

2013-01-04 Albiréo

你能展示你的點擊事件是什麼樣子嗎？你如何試圖觸發它？ –

您沒有向我們展示腳本... – Gabe

您需要顯示JavaScript代碼。沒有看到它，我的猜測是在插件將事件綁定到元素之前觸發了單擊事件。 – JJJ

爲什麼不顯示你想要，而不是標籤 '點擊' 了嗎？有沒有額外的代碼可以讓你同時運行？

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-04 20:24:16 vortextangent

爲什麼？因爲我很笨！！大聲笑。非常簡單，可能非常高效：我現在就試試。我很快就會給你一個地位！ –

這是正確的軌道！我改變了「hide」部分的第一行：'$（'＃tabs li a'）。filter（'：not（.inactive）'）。addClass（'inactive'）;'。我現在有一個顯示問題：如果我沒有點擊標籤，標籤的內容就不會顯示。我一直在嘗試... –

我發現它！看看我的自我回答...謝謝你：你是給我正確軌道的人。 –

-1

既然你沒有顯示一些JS代碼，我做了這個。 click_tab選擇所需的選項卡。

看到這個JSFiddle。

如果要在文檔加載時選擇標籤，只需撥打click_tab()並用適當的div的id即可。

來源

2013-01-04 19:26:19

它的工作原理，但我必須等待頁面的完整加載。感謝您的工作和答案！^_^ –

-1

獲取鏈接並使用其默認點擊方法。

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

或者用jQuery

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

來源

2013-01-04 19:28:13 Andreas

在完成加載頁面後執行它們時，它們都在運行。看到我的答案。我感謝你的幫助！但顯示錯誤的選項卡，並在一秒鐘後顯示好的選項卡。這不是很漂亮，但它是一個旁路。 –

我只把標籤的控制，在開始時OG網頁加載：

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-04 21:13:22

如何模擬與jQuery的href點擊

回答

相關問題