jquery - 打开带有特定选项卡的链接

Question

在一个页面中，我有这样的标签

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>

    <div id="tabs-1">
       1
    </div>


    <div id="tabs-2">
      2

    </div>
    <div id="tabs-3">
3
    </div>
</div>

和表单中的提交按钮

当我点击提交时，我需要在同一页面中打开特定选项卡

谢谢

Answer 1

试试这个

<script language="javascript" type="text/javascript">
    $('#tabs').tabs();
    function select_tab(tabeName){
       $('#tabs').tabs('select', '#'+tabname);
    }
</script>

html 提交

<input name="" type="button" onclick='select_tab("tab1")' value="submit"/>

Answer 2

如果您使用 jqueryui 选项卡，则可以采用这种方式；当您单击按钮时，它将选择第二个选项卡

先加载jquery和jqueryui

<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
    $("#tabs").tabs();// initiate tabs with jqueryui
});
</script>

html代码

我们也可以将按钮放在选项卡之外，但在这里我将它包含在第一个选项卡中

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
       1
       <input name="" type="button" onclick='$("#tabs").tabs( "select", "tabs-2" )' value="select tab2"/>
    </div>
    <div id="tabs-2">
      2

    </div>
    <div id="tabs-3">
     3
    </div>
</div>

示例：Jsfiddle 演示