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显示最后一个标签

回答

相关问题