jquery 实现 table 和 标题 的联动显示

从后端读取数据后，根据选择的标题的不同显示不同的表格
先看看效果吧：


使用了jquery进行联动：

html代码：
<li class="active">
<a href="#word" onclick="setdisplay('word')" data-toggle="tab">单字</a>
</li>
<li>
<a href="#vocabulary" onclick="setdisplay('vocabulary')" data-toggle="tab">词汇</a>
</li>


<table id="word" style="display: block">
    <thead>
        <th>编号</th>
        <th>字</th>
    </thead>
</table>
<table id="vocabulary" style="display: none">
    <thead>
        <th>编号</th>
        <th>词汇</th>
    </thead>
</table>



点击标题后调用的javascript函数是：

    function setdisplay(catalog) {
        var str = catalog.toString();
        $("#word").hide();//先把所有的隐藏，然后再显示你想显示的
        $("#vocabulary").hide();
        $("#"+str+"").show();
    }

解释一下那个function 里的语句：

$("#word").show();表示style="display: block", $("#word").hide()表示display:none; 

$("#word").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

也可以直接用jquery语句：

("#id").css('display','none'); 
$("#id").css('display','block'); 

或

$("#id")[0].style.display = 'none'; 

$(“#id”)返回的是JQuery
它是个集合肯定有display属性