JQuery--实现标签页

最新推荐文章于 2024-01-09 16:02:28 发布

风口没有猪

最新推荐文章于 2024-01-09 16:02:28 发布

阅读量248

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_36615481/article/details/53740987

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>