Question

问题是，在第二个标签中，我写了一个文本字段和提交按钮。提交后，它将转到第一个选项卡，即 java 。我想把它放在同一个标签上。

请提供一些建议。

final.php

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="styles.css"/>
    <script src="scripts.js"></script>
</head>
    <body>
    <h1>Simple Tabs</h1>

<ul id="tabs">
    <li><a href="#java">Java</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>


<div id="java" class="tab-section">
    <h2>Here we place title  For JAVA</h2>
    <p>Here we place details </p>
</div>

<div id="python" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>

    <form name="input" action="final.php" method="POST">

    Name <input type="text" name="value" id="somevalue" style="width:150px;">
    <input type = "Submit" Name = "Submit1" value = "submit">

    </form>

    <?
    if (isset($_POST)) {echo ($_POST['value']);}
    ?>
</div>

<div id="perl" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

</body>
</html>

scripts.js中

    $(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
    $('#tabs a.current').removeClass('current');
    $('.tab-section:visible').hide();
    $(this.hash).show();
    $(this).addClass('current');
    e.preventDefault();
    }).filter(':first').click();
});

Answer 1

如下所示使用它。

HTML更改

Name <input type="text" name="value" id="somevalue" style="width:150px;">
<input type = "Submit" id="submitBtn" Name = "Submit1" value = "submit">

</form>

添加Javascript：

$(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
$('#tabs a.current').removeClass('current');
$('.tab-section:visible').hide();
$(this.hash).show();
$(this).addClass('current');
e.preventDefault();
}).filter(':first').click();
});

$(function(){
  $('input#submitBtn').click(function(){
    e.preventDefault();
    var val = $('#somevalue').val();
    $.ajax({
       type: "POST",
       data: {value: val}
       success: function(){
        //do some stuff
       }
    })
 })
})

提交值后，请保持在同一选项卡上

1 个答案: