JQuery--实现标签页

来源：互联网发布：淘宝详情页英文素材编辑：程序博客网时间：2024/06/07 13:59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>    <head>        <title>添加商品</title>        <meta http-equiv="content-type" content="text/html;charset=utf-8">       <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>        <style type="text/css">            #tabbar-div{                background:none repeat scroll 0 0 #80BDCB;                height: 27px;                padding-left: 10px;                padding-top: 1px;                }             #tabbar-div p{                margin:2px 0 0;            }            .tab-front{                background: none repeat scroll 0 0 #BBDDE5;                border-right: 2px solid #278296;                cursor:pointer;                font-weight: bold;                line-height: 20px;                padding: 4px 15px 4px 18px;            }            .tab-back{                border-right: 1px solid #fffff;                color: $fffff;                cursor: pointer;                line-height: 20px;                padding: 4px 15px 4px 18px;            }             .tab-hover{                background: none repeat scroll 0 0 #94c9d3;                border-right: 1px solid #fffff;                color: $fffff;                cursor: pointer;                line-height: 20px;                padding: 4px 15px 4px 18px;            }        </style>             <script type="text/javascript">         //加载事件里 定义click事件        $(function(){            $('.table_a').hide(); //全部table变暗            $('.table_b').show();  //默认table高亮            $('#tabbar-div span').click(function(){                $('#tabbar-div span').attr('class','tab-back');//全部标签变暗                $(this).attr('class','tab-front'); //当前标签 高亮                 $('.table_a').hide(); //全部table变暗                var idflag = $(this).attr('id');//当前table高亮                $('#'+idflag+"-tb").show();            });        });        </script>    </head>    <body>        <div id="tabbar-div">            <p>                <span id="general-tab" class="tab-front">通用信息</span>                <span id="detail-tab" class="tab-back">详细描述</span>                <span id="mix-tab" class="tab-back">其他信息</span>            </p>        </div>               <div></div>        <div style="font-size: 13px;margin: 10px 5px">            <form action="__SELF__" method="post" enctype="multipart/form-data">             <table border="1" width="100%" class="table_a" id="detail-tab-tb"><tr>                 <td>22222222222</td>             </tr></table>             </form>              <table border="1" width="100%" class="table_a" id="mix-tab-tb"><tr>                 <td>33333333333</td>             </tr></table>             </form>             <form action="__SELF__" method="post" enctype="multipart/form-data">            <table border="1" width="100%" class="table_a table_b" id="general-tab-tb">                <tr>                    <td>111111111</td>                    <td><input type="text" name="goods_name" />默认table</td>                </tr>            </table>            </form>        </div>    </body></html>
0 0