假想的篮子在这里......

但如果我没有检查然后控件将保留在第一个选项卡中，尽管单击第二个选项卡控件将不会转到第二个选项卡。完整源代码：http://flowplayer.org/tools/demos/tabs/wizard.html

但我的要求是当我选中复选框时，自动控制会将我带到第二个标签。但是在检查复选框之后我必须点击第二个标签然后我才看到它的内容。但我希望在检查第一个选项卡中的复选框后，控件将自动转到第二个选项卡。怎么做到呢？我需要帮助。

I am giving codes:
1. First tab content
2. Second tab content
3. Third content
4. Full source code

第一个标签代码：

<div>

        <label>
            Username <br />
            <input name="username"/>
        </label>

        <label>
            Email <br />
            <input name="email"/>
        </label>

        <label>
            <input id="terms" type="checkbox" />
            I accept <a href="#">these</a> terms and conditions
        </label>

        <p>
            <button class="next">Next &raquo;</button>
        </p>

    </div>

第二个标签代码：

<div>
        <h2>An imaginary basket is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
            <button class="next">Next &raquo;</button>
        </p>
    </div>

第三个标签代码：

<div>
        <h2>An imaginary order is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
        </p>

    </div>

完整的源代码：

<!DOCTYPE html>

<html>

<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.

http://flowplayer.org/tools/demos/

Do *not* reference CSS files and images from flowplayer.org when in production  

Enjoy!

- ＆GT;

<head>
<title>jQuery Tools standalone demo</title>

<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>


<!-- standalone page styling (can be removed) -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   



<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/tabs.css"/>


<style>

accept
I think this will solve your problem,

It has validations on checkboxes to continue with next tabs.

http://flowplayer.org/tools/demos/tabs/wizard.html

/* tab pane styling */
.panes div {
display:none;       
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}


div.panes div {
    background:#fff url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x 0 5px;
    -background:#fff;
    height:172px;
}

div.panes label {
    margin-bottom:15px;
    display:block;
}

label.error {
    color:red;
}
</style>
</head>

<body>

<div id="wizard">

<!-- tabs -->
<ul class="tabs">
    <li><a href="#" class="w2">Personal info</a></li>
    <li><a href="#" class="w2">Shopping basket</a></li>
    <li><a href="#" class="w2">Review order</a></li>
</ul>

<!-- panes -->
<div class="panes">
    <div>

        <label>
            Username <br />
            <input name="username"/>
        </label>

        <label>
            Email <br />
            <input name="email"/>
        </label>

        <label>
            <input id="terms" type="checkbox" />
            I accept <a href="#">these</a> terms and conditions
        </label>

        <p>
            <button class="next">Next &raquo;</button>
        </p>

    </div>

    <div>
        <h2>An imaginary basket is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
            <button class="next">Next &raquo;</button>
        </p>
    </div>

    <div>
        <h2>An imaginary order is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
        </p>

    </div>
</div>

<!-- activate tabs with JavaScript -->
<script>
$(function() {



// get container for the wizard and initialize its exposing
var wizard = $("#wizard").expose({color: '#789', lazy: true});

// enable exposing on the wizard
wizard.click(function() {
    $(this).expose().load();
});



// enable tabs that are contained within the wizard
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {

    /* now we are inside the onBeforeClick event */

    // ensure that the "terms" checkbox is checked.
    var terms = $("#terms");
    if (index > 0 && !terms.get(0).checked)  {
        terms.parent().addClass("error");

        // when false is returned, the user cannot advance to the next tab
        return false;
    }

    // everything is ok. remove possible red highlight from the terms
    terms.parent().removeClass("error");
});



// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");

// "next tab" button
$("button.next", wizard).click(function() {
    api.next();
});

// "previous tab" button
$("button.prev", wizard).click(function() {
    api.prev();
});

});
</script>



</body>

</html>

Answer 1

如果要检查第一个标签上的复选框，您想要更改为第二个标签吗？

// when checkbox is clicked
$('#terms').click(function() {
    // is checkbox checked
    if ($(this).is(':checked')) {
        // select tab 1
        $('#wizard').tabs('select', 1);
    }
});

这是example。

=== UPDATE ===

现在第二个标签被禁用，而未选中复选框：

$('#wizard').tabs({ disabled: [1] });

// when checkbox is clicked
$('#terms').click(function() {
    // is checkbox checked
    if ($(this).is(':checked')) {
        // enable tab 1
        $('#wizard').tabs('enable', 1);
        // select tab 1
        $('#wizard').tabs('select', 1);
    } else {
        // disable tab 1
        $('#wizard').tabs('disable', 1);
    }
});

这里是updated example。

Answer 2

// "next tab" button
$("#terms").click(function() {
   if ( this.checked === true)
       api.next();
});

将此代码放在

之后

// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");

它处理条款复选框上的点击事件，如果已选中，请转到下一个标签。

选中复选框时启用/禁用选项卡

假想的篮子在这里......

2 个答案: