按钮不会更改JQuery UI选项卡中的选项卡

Question

I have a web page that has JQuery tabs with iFrames loaded in the 2nd through 4th tab. 我有一个网页，其中包含在第二个到第四个选项卡中加载了iFrame的JQuery选项卡。 My problem is in a button I've added to the first tab. 我的问题是我添加到第一个标签的按钮中。 I want that button, when pressed, to change to the next tab. 我希望该按钮在按下时更改为下一个选项卡。

EDIT 1: Here is a fiddler that shows my problem. 编辑1：这是一个提琴手，显示我的问题。 http://jsfiddle.net/lochalan/AXa9J/ http://jsfiddle.net/lochalan/AXa9J/

Webpage: 网页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Student Application</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="/user/tabs.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"> 
            html {
                font-size:10px;
            }

            .iframetab {
                width:100%;
                height:auto;
                border:0px;
                margin:0px;
                position:relative;
                top:-13px;
            }

            .ui-tabs-panel {
                padding:5px !important;
            }

            .openout {
                float:right;
                position:relative;
                top:-28px;
                left:-5px;
            }
        </style>
</head>

<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td>
    <img src="img/logo960x100moodle.png" width="960" height="92" alt=""><br>
    </td></tr>
    </table>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Instructions</a></li>
    <li><a class="tabref" href="#tabs-2" rel="/user/application-tab.php">Student Information</a></li>
    <li><a class="tabref" href="#tabs-3" rel="/user/emergency-tab.php">Emergency Contact</a></li>
    <li><a class="tabref" href="#tabs-4" rel="/user/healthform-tab.php">Health Form</a></li>
  </ul>
  <div id="tabs-1" class="tabMain">
    <h2>Welcome to QSI Shekou!</h2>
        <p>This application is designed to give the school all the information needed to make an informed decision as to whether QSI is the best school for your child. We believe all children can be successful and we are proud that you have choosen QSI Shekou as that place. In the next few minutes, you will be presented with 3 seperate application forms. The first application gathers the needed biographical information about your child. The second form provides the school with emergency contact information and instructions in the event the school needs to contact someone on your child's behalf. The third form is our health form. This provides the school with information about your child's health in order to help us make QSI Shekou a fun and safe place to learn and grow.</p>
        <p><strong>Remember to give the following documents to the admissions department:</strong></p>
            <ul>
                <li>Immunization records (copy)</li>
                <li>Health / Emergency Form (Found on our Website)</li>
                <li>Previous School Records (copy)</li>
                <li>Student's Passport (copy)</li>
                <li>Student's Visa (copy)</li>
                <li>Mother's Passport (copy)</li>
                <li>Mother's Visa (copy)</li>
                <li>Father's Passport (copy)</li>
                <li>Father's Visa (copy)</li>
                <li>3 Student Passport Photos</li>
            </ul>       
        <button class="nexttab" href="#"><strong>Let's get started!</strong></button>
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4"> 
  </div>
</div>


</body>
</html>

Javascript / JQueryUI: Javascript / JQueryUI：

$(document).ready(function() {
    var $tabs = $('#tabs').tabs();

    $(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
    });

//get selected tab
    function getSelectedTabIndex() {
        return $tabs.tabs('option', 'selected');
    }

//get tab contents
    beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");
    loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));

     $("a.tabref").click(function() {
        loadTabFrame($(this).attr("href"),$(this).attr("rel"));
     });

//tab switching function
    function loadTabFrame(tab, url) {
        if ($(tab).find("iframe").length == 0) {
            var html = [];
            html.push('<div class="tabIframeWrapper">');
            html.push('<div class="openout"><a href="' + url + '"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
            html.push('</div>');
            $(tab).append(html.join(""));
            $(tab).find("iframe").height($(window).height()-80);
        }
    return false;
    }

});

Why won't my button change the tab? 为什么我的按钮不更改标签？

Answer 1

Use active option to select current or change tab 使用active选项选择当前或更改选项卡

var selected = $("#tabs").tabs("option", "active");
$("#tabs").tabs("option", "active", selected + 1);

Answer 2

There's a few things wrong here, more than I'm willing to cover on a forum unfortunately. 这里有些错误，但不幸的是，我不愿意在一个论坛上讨论。

If you're going to use jQueryUI then I suggest you go use ThemeRoller . 如果您要使用jQueryUI，那么建议您使用ThemeRoller 。 Do a UI theme and use the CSS it generates for you. 做一个UI主题，并使用它为您生成的CSS。 The classes are named very intuitively and it will help you identify what your functions are working on. 这些类的命名非常直观，它将帮助您确定函数在做什么。 Use Firefox with Firebug plugin so you can debug. 将Firefox与Firebug插件配合使用，以便进行调试。 You're on the right track but you're still cloudy on some core concepts. 您走在正确的道路上，但是您对某些核心概念仍然不了解。

jQuery Tabs API jQuery Tabs API
jQueryUI ThemeRoller jQueryUI ThemeRoller

按钮不会更改JQuery UI选项卡中的选项卡

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-02-22 01:53:08

解决方案2
0 2013-02-22 02:41:43

按钮不会更改JQuery UI选项卡中的选项卡

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-02-22 01:53:08

解决方案2 0 2013-02-22 02:41:43

解决方案1
1 已采纳 2013-02-22 01:53:08

解决方案2
0 2013-02-22 02:41:43