jQuery实现选项卡功能

ゝ一世哀愁。 2022-05-21 11:24 281阅读 0赞

废话不多说了，直接上代码就好了

DOM结构有点儿长，其实很明了的。。。

<table>
        <thead>
            <tr id="table-title">
                <td class="current">经常浏览</td>
                <td>工作网站</td>
                <td>文件地址</td>
                <td>所有系统</td>
            </tr>
        </thead>
        <tbody id="container">
            <tr>
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站一</p>
                    </div>
                </td>
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站一</p>
                    </div>
                </td>
            </tr>
            <tr class="hidden">
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站二</p>
                    </div>
                </td>
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站二</p>
                    </div>
                </td>
            </tr>
            <tr class="hidden">
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站三</p>
                    </div>
                </td>
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站三</p>
                    </div>
                </td>
            </tr>
            <tr class="hidden">
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站四</p>
                    </div>
                </td>
                <td>
                    <img src="./img/banner.jpg" alt="">
                    <div class="mark">
                        <p>常用网站四</p>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

.current { 
        color: #409EFF;
        background: #ffffff;
    }
    .hidden{ 
     display:none;
    }