导航到按钮上的Jquery选项卡

时间:2014-02-21 13:23:40

标签: jquery jquery-ui jquery-plugins

我正在使用Jquery Tabs和jquery-ui 1.9.2。我想在tab1点击提交按钮时转到另一个tab2。

$('#submitButton').click(function() { 
        $("#tabs").tabs("option", "active", "Page2");
    });

它正在给我

cannot call methods on tabs prior to initialization; attempted to call method 'option' 

使用select时的类似错误。我也使用索引作为另一个post.Same错误。我的标签代码是这样的:

<div id="tabs">
     <ul>
          <li><a href="page1.jsp">Page1</a></li>
          <li><a href="page2.jsp">Page2</a></li>
     </ul>
</div>

修改

我给出的href实际上是JSP。标签出来很好但切换到另一个标签不起作用

请帮忙。这是什么初始化。

3 个答案:

答案 0 :(得分:0)

尝试使用:

$("#tabs").tabs("option", "active", 1);

而不是:

$("#tabs").tabs("option", "active", "Page2");

答案 1 :(得分:0)

您可以使用:

// Activate the second tab (zero-based index)
$("#tabs ul").tabs( "select", 1 );

使用新API:

// Activate the second panel
$("#tabs ul").tabs( "option", "active", 1 );

答案 2 :(得分:0)

试试这个

 $("#tabs").tabs("option", "active", 1);
  • 索引从0开始,所以转到标签2给出1。

如果有效,或者您有任何疑问,请与我们联系。

这是完整的HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link href="../JS/jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.css"
        rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $("#tabs").tabs();
        });

        function goto() {

            $("#tabs").tabs("option", "active", 1);
        }
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">0</a></li>
            <li><a href="#tabs-2">1</a></li>
            <li><a href="#tabs-3">2</a></li>
        </ul>
        <div id="tabs-1">
            <p>
                1
                <input id="Button1" type="button" value="button" onclick="goto()" />
            </p>
        </div>
        <div id="tabs-2">
            <p>
                2</p>
        </div>
        <div id="tabs-3">
            <p>
                3</p>
        </div>
    </div>
</body>
</html>