Question

我有一个网页，其中包含在第2到第4个标签中加载iFrame的JQuery标签。我的问题是在我添加到第一个标签的按钮中。我想要按下该按钮，切换到下一个标签。

编辑1：这是一个显示我的问题的小提琴手。 http://jsfiddle.net/lochalan/AXa9J/

网页：

<!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：

$(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;
    }

});

为什么我的按钮不会更改标签？

Answer 1

使用active选项选择当前或更改标签

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

Answer 2

这里有一些问题，不仅仅是我愿意在一个论坛上报道。

如果您打算使用jQueryUI，我建议您使用ThemeRoller。做一个UI主题并使用它为您生成的CSS。这些类的命名非常直观，它可以帮助您确定您的函数正在处理什么。将Firefox与Firebug插件一起使用，以便进行调试。你走在正确的轨道上但是你仍然对一些核心概念感到茫然。

jQuery Tabs API
jQueryUI ThemeRoller

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

2 个答案: