JavaScript顯示最後一個標籤

好吧，所以我創建了4個標籤，每次只顯示1個標籤，但是如果我在標籤4中發佈了一個表單，那麼標籤1會變爲活動狀態，但我希望它自動顯示標籤東西被張貼在很抱歉，如果壞的描述，但這裏是我的代碼：JavaScript顯示最後一個標籤

<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script> 
<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> 


<center> 
    <ul class="tabs"> 
    <li><a href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
    <li><a href="#tab4">Tab 4</a></li> 

    </ul> 
    <div class="tab_container"><br><br><br> 
    <div id="tab1" class="tab_content"> 
<center><h2>Tab 1</h2></center> 
       </div> 
        <div id="tab2" class="tab_content"> 
<center><h2>Tab 2</h2></center> 
       </div> 
        <div id="tab3" class="tab_content"> 
<center><h2>Tab 3</h2></center> 
       </div> 
        <div id="tab4" class="tab_content"> 
        <?php 
        $getmessage = $_POST["message"]; 
        if($getmessage != null) { 
         echo"Thanks for posting the text!"; 
        } ?> 
<center><form method="post" name="form4"><input type="text" id="form4" name="message" placeholder="Type a text here"><br><input type="submit" value="Post text"></form></center> 
       </div> 
</div></center> 
</center>

所以，當我提出在標籤4我去片1的形式和我手動必須去片4看到消息我的回聲顯示。我需要它自動轉到提交表單的選項卡，但我不知道如何執行此操作。

來源

2015-09-28 Patric Nøis

提交後，使用＃結尾處的＃tab4重定向到該頁面。 –

您可以使用ajax提交您的文章，然後避免重新加載頁面，或者在返回時檢查是否來自帖子然後設置所需的選項卡。 – gon250

給你的表格action="#tab4"（確保頁面重新加載）。而且在你的JS腳本，你必須添加代碼，即將從網址閱讀：

var hash = (window.location.hash).substr(1) || null; 
if(hash == "tab4") 
    $(".tab_content:last").show();

來源

2015-09-28 13:57:13 Nonemoticoner

添加另一個輸入（隱藏）元素的形式，如active_tab與活動標籤作爲填充它，當你點擊標籤。從$_POST中獲取該值並相應地設置默認選項卡。

步驟1：添加輸入元件

<input type="hidden" name="active_tab" />

步驟2：更新輸入的值

$("ul.tabs li").click(function() { 
    $('input[name="active_tab"]').val($(this).index()); 
    //your remaining code as is 
    //...

步驟3：根據交值組默認選項卡

$(document).ready(function() { 
    //Default Action 
    var tabNum = "<? echo !empty($_POST['active_tab']) ? $_POST['active_tab'] : 0; ?>"; 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li").eq(tabNum).addClass("active").show(); //Activate the tab 
    $(".tab_content").eq(tabNum).show(); //Show the tab content

來源

2015-09-28 14:13:21 lshettyl

JavaScript顯示最後一個標籤

回答

相關問題