用fieldset标签轻松实现Tab选项卡效果

fieldset是一个不常用的HTML标签，它可以将表单内的元素分组显示，legend标签为 fieldset 元素定义标题。由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和栏目标题的效果，今天就试了试以它们为基础来做一个Tab选项卡效果。整体效果与功能还将继续改进。

HTML：

    <form id="form1" method="post" action="#">
        <fieldset>
            <legend>
                <span class="tabName curTab">Form Tab I</span><span class="tabName">Form
                    Tab II</span><span class="tabName">Form Tab III</span>
            </legend>
            <p>
                <label for="userName">User Name: </label><input type="text"
                    id="userName" name="userName" value="admin" />
            </p>
            <p>
                <label for="userPwd">User Password: </label> <input type="password"
                    id="userPwd" name="userPwd" value="admin" />
            </p>
            <label for="userAddr">Born Place: </label><select name="userAddr">
                <option value="Beijing">Beijing</option>
                <option value="Shanghai">Shanghai</option>
                <option value="Guangzhou">Guangzhou</option>
            </select>

        </fieldset>
        <fieldset>
            <legend>
                <span class="tabName">Form Tab I</span><span class="tabName curTab">Form
                    Tab II</span><span class="tabName">Form Tab III</span>
            </legend>
            <p>
                <label for="userSex">Gender: </label><input type="radio"
                    id="userSexMale" name="userSex" value="Male" /> <label
                    for="userSexMale">Male</label><input type="radio"
                    id="userSexFemale" name="userSex" value="Male" /><label
                    for="userSexFemale">Female</label>
            </p>
        </fieldset>
        <fieldset>
            <legend>
                <span class="tabName">Form Tab I</span><span class="tabName">Form
                    Tab II</span><span class="tabName curTab">Form Tab III</span>
            </legend>
            <p>
                <span>Select your hobbies: </span><br /> <select
                    multiple="multiple" id="hobbies" name="hobbies">
                    <option>Football</option>
                    <option>Basketball</option>
                    <option>Pingpong</option>
                    <option>badminton</option>
                    <option>Skiing</option>
                    <option>Skating</option>
                    <option>Swimming</option>
                    <option>Jogging</option>
                </select>
            </p>
        </fieldset>
        <div class="submit">
            <input type="submit" value="Submit" /> <input type="reset"
                value="Reset" />
        </div>
    </form>

CSS：

* {
    padding: 0;
    marging: 0;
}

fieldset {
    border: 1px outset #000;
    width: 30em;
    background-color: #eee;
}

legend {
    border: none;
    padding: 2px 6px
}

input,select {
    border: 1px solid #000;
}

label {
    width: 8em;
    margin-right: 0.5em;
}

.submit {
    width: 30em;
    text-align: center;
}

.submit input {
    color: #000;
}

.tabName {
    padding: 0 5px;
    border: 1px solid #393939;
    cursor: pointer;
    display: block;
    float: left;
}

.curTab {
    color: #FFF;
    background-color: #444;
    font-size: 1.2em;
    margin-top: -4px;
    display: block;
    float: left;
    display: block;
}

JS(引用jQuery)：

        (function($, window) {
            $(function() {
                var tabNum = $("#form1 fieldset").length;
                //when ready
                (function() {
                    $("#form1 fieldset").hide();
                    $("#form1 fieldset:first").show();
                })();
                //$("#form1 fieldset:first .tabName:first").addClass("curTab");

                $(".tabName").mouseover(function(e) {
                    console.log("df");
                });
                $(".tabName").click(function(e) {
                    var index = $(".tabName").index(this);
                    //console.log(index);
                    $("#form1 fieldset").hide();
                    $("#form1 fieldset:eq(" + index % tabNum + ")").show();
                });

                $("#hobbies").change(function() {
                    //console.log("HELLO");
                });
                
                $("#form1").submit(function(){
                    console.log("SUBMITTING...");
                });
            });
        })(jQuery, window);