jquery tab效果

来源：互联网发布：网络辟谣平台编辑：程序博客网时间：2024/05/29 15:46

    <style type="text/css">        #tb_Test td        {            border: 1px solid Black;            height:50px;        }        .change_Bg        {            background-color:yellow;        }    </style>

    <script type="text/javascript">        $(function () {            $("#tb_Test tr:gt(0)").css("display","none");            $("#tb_Test tr:first td").click(function () {                //获取单元格下标                var js_Index = $(this).index();                $(this).addClass("change_Bg").siblings().removeClass("change_Bg");                $(this).parent("tr").nextAll("tr").eq(js_Index).css("display", "").siblings("tr:gt(0)").css("display","none");            });        });    </script>

    <table id="tb_Test" style="border-collapse:collapse;width:200px;">        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td colspan="3">11</td>        </tr>        <tr>            <td colspan="3">22</td>        </tr>        <tr>            <td colspan="3">33</td>        </tr>    </table>

0 0