用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);