用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" /> <labelfor="userSexMale">Male</label><input type="radio"                    id="userSexFemale" name="userSex" value="Male" /><labelfor="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 /> <selectmultiple="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);

转载于:https://www.cnblogs.com/pinocchioatbeijing/archive/2012/02/24/2367014.html

用fieldset标签轻松实现Tab选项卡效果相关推荐

table标签+css代码实现选项卡效果(用)
演示效果截图 JavaScript代码 <script language=javascript> function secBoard(n) { for(i=0;i<secTable. ...
android 纯代码选项卡,纯javascript实现tab选项卡效果代码
提示:您可以先修改部分代码再运行买家中心卖家中心待处理订单(10) 待确定订单(本月购买额度17826.35元(返20元) 本年购买额度您的购买金额排第1名,奖励100元! 待处理订单(10) ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...
面向对象的tab选项卡实现
利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图: HTML代码: <!DOCTYPE html> <html lang="en"> <h ...
微信小程序实例：实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字
公司有个需求,在ant-design-vue的标签页上,在tab选项卡头增加文字. 具体需求效果,如下图. 实现原理: 一.主要用到插槽(slot) 二.代码如下: <a-tabs style= ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...

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

用fieldset标签轻松实现Tab选项卡效果相关推荐

最新文章

热门文章