製作第二個標籤第一個活動

我有這個非常知名的腳本，我正在努力工作，目前它的一切都很好，但是當您第一次打開頁面時，它會顯示第一個標籤，因爲它應該，想要顯示第二個標籤。（第一隻是一個郵件撰寫選項卡，第二個是實際的收件箱）製作第二個標籤第一個活動

這裏是JavaScript

<script type="text/javascript"> 

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false; 
    }); 

}); 

</script>

這裏是選項卡中的HTML

> <ul class="tabs"> 
>  <li><a href="#compose" class="compose"></a></li> 
>  <div id="mail_sidebar_top"> 
>   <li><a href="#inbox" class="inbox">Inbox(0)</a></li> 
>   <li><a href="#sent_mail" class="sent_mail">Sent Mail(0)</a></li> 
>   <li><a href="#trash" class="trash">Trash(0)</a></li> 
>   <li><a href="#reported" class="reported">Reported</a></li> 
>   <li><a href="#drafts" class="drafts">Drafts</a></li> 
>   
>  </div><!---end mail_sidebar_top---> 
>  
>  <div id="mail_sidebar_middle"> 
>   <li><a href="#notifications" class="notifications">Notifications</a></li> 
>   <li><a href="#alerts" class="alerts">Alerts</a></li> 
>   
>  </div><!---end mail_sidebar_top---> 
>  
>  </ul>

感謝您的任何和所有幫助

來源

2012-08-03 Arken

爲了顯示第二個選項卡，更改這些線

$("ul.tabs li:eq(1)").addClass("active").show(); //Activate second tab 
    $(".tab_content:eq(1)").show(); //Show second tab content

基本上，在當前版本中，當加載頁面時，你添加一個基於jQuery選擇激活的標籤內容和課程。由於您的html內容與選項卡的順序相同，而不是使用第一個實例的選擇器（即:first），因此我們可以將其更改爲:eq(1)。（在這種情況下，它是一個，因爲jquery引用數組中的DOM元素，所以第一個選項卡位於索引0，第二個位於索引1）。要在開始時顯示不同的選項卡，只需將:eq(1)更改爲:eq(n)，其中n是所需選項卡的數組索引。

編輯一個更好的解決方案，因爲它增加了一個性能提升使用的jQuery提供的實際EQ（）函數：

$("ul.tabs li").eq(1).addClass("active").show(); //Activate second tab 
    $(".tab_content").eq(1).show(); //Show second tab content

來源

2012-08-03 19:22:02 Jlange

確定輝煌，我用你的編輯版本，它完美的作品，我只是想我要添加的另一個功能是從標題中打開一個特定的選項卡，所以如果你去的網頁與'www.website.com/ mail.php？tab_id = 3'然後它會打開第三個標籤打開頁面，有沒有辦法使用eq做到這一點？ – Arken 2012-08-03 21:47:11

實際上並不擔心那個評論，我只是認爲我可以用一個PHP獲取然後將結果打印到eq中。如果您還有其他解決方案，請儘管告訴我，謝謝。 – Arken 2012-08-03 21:49:15

要回答你的問題，是的，你可以確定使用php顯示哪個頁面。我很抱歉，因爲我有一段時間沒有做過php，但我認爲你可以把php中的變量解析並放入eq函數中。例如：$（「ul.tabs li」）。eq（<？= $ phpVar？>）。addClass（「active」）。show（）;'確保$ phpVar是一個int。 – Jlange 2012-08-05 23:08:17

-1

$(".tabs").tabs({ 
    selected: 1 
});

有很多選項here。

來源

2012-08-03 17:41:44

他沒有使用jQueryUI的。 – Jlange 2012-08-03 19:17:36

製作第二個標籤第一個活動

回答

相關問題