fieldset是一個(gè)不常用的HTML標(biāo)簽，它可以將表單內(nèi)的元素分組顯示，legend標(biāo)簽為 fieldset 元素定義標(biāo)題。由于各瀏覽器在顯示fieldset和legend結(jié)構(gòu)時(shí)會(huì)自動(dòng)為其添加邊框和欄目標(biāo)題的效果，今天就試了試以它們?yōu)榛A(chǔ)來(lái)做一個(gè)Tab選項(xiàng)卡效果。整體效果與功能還將繼續(xù)改進(jìn)。

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

轉(zhuǎn)載于:https://www.cnblogs.com/pinocchioatbeijing/archive/2012/02/24/2367014.html

總結(jié)

以上是生活随笔為你收集整理的用fieldset标签轻松实现Tab选项卡效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。