JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tb">
    <tr>
        <td>图书</td><td>杂志</td>
    </tr>
    <tr class="tabCon">
        <td colspan="2">图书<span>医药 教育 小说</span></td>
    </tr>
    <tr>
        <td>漫画</td><td>听书</td>
    </tr>
    <tr class="tabCon">
        <td colspan="2">漫画<span>漫画 漫画 漫画</span></td>
    </tr>
    <tr>
        <td>电影</td><td>音乐</td>
    </tr>
    <tr class="tabCon">
        <td colspan="2">电影<span>电影 电影 电影</span></td>
    </tr>
</table>

CSS

#tb{
    border-collapse:collapse;
    background:#EEE;
    cursor:pointer;
}
#tb td{
    border:1px solid #000;
    font-size:16px;
    font-weight:bolder;
    color:#880000;
    padding:5px 40px;
}
.hide{
    display:none;
}
.tabCon{
    display:none;
    background:#F60;
}

JavaScript

$(function(){
    $("#tb tr").each(function(index,item){
        if(index % 2 === 0){
            $(this).bind("click",function(){
                $(".hide").removeAttr("class");
                $(".tabCon").hide();
                $(this).attr("class","hide").next("tr").show();
            });
        }
    });
});