如何使用jquery在超链接中创建页面？

页面内容应使用div标记的id属性显示在同一页面上。标记不应重定向到下一页。内容应切换。

请检查以下示例：

$(document).ready(function() {
        $("#tablecontent").show();
        $("#tablecontent1").hide();
        $(".dropdown-menu li a").click(function(e) {
            e.preventDefault();
            var href = $(this).attr('href');
            if(href=="#tablecontent"){
                $("#tablecontent").show();
                $("#tablecontent1").hide();
                //alert(href);
            }else{
                $("#tablecontent1").show();
                $("#tablecontent").hide();
                //alert(href);
            }         
        });
    });
<div class="table-responsive" id="tablecontent">          

              <table class="table">
                <thead>
                  <tr>
                    <th>Table</th>
                    <th>Field Name</th>
                    <th>Data Type</th>
                    <th>Size</th>
                    <th>Key</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Person</td>
                    <td>
                        <ul>
                            <li>person_id</li>
                            <li>person_first</li>
                            <li>person_name</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>int</li>
                            <li>varchar</li>
                            <li>varchar</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>int</li>
                            <li>varchar</li>
                            <li>varchar</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>PRI</li>
                        </ul>
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>
              <div class="table-responsive" id="tablecontent1">          
                <table class="table">
                <thead>
                  <tr>
                    <th>Table</th>
                    <th>Field Name</th>
                    <th>Data Type</th>
                    <th>Size</th>
                    <th>Key</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>car</td>
                    <td>
                        <ul>
                            <li>car_id</li>
                            <li>car_model</li>
                            <li>car_price</li>
                            <li>person_id</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>int</li>
                            <li>varchar</li>
                            <li>varchar</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>int</li>
                            <li>varchar</li>
                            <li>varchar</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>PRI</li>
                            <li>-</li>
                            <li>-</li>
                            <li>FK</li>
                        </ul>
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>

$（文档）.ready（函数（）{
$（“#tablecontent”）.show（）；
$（“#tablecontent1”）.hide（）；
$（“.下拉菜单li a”）。单击（函数（e）{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
如果（href==“#表格内容”）{
$（“#tablecontent”）.show（）；
$（“#tablecontent1”）.hide（）；
//警报（href）；
}否则{
$（“#tablecontent1”）.show（）；
$（“#tablecontent”）.hide（）；
//警报（href）；
}         
});
});
桌子
字段名
数据类型
大小
钥匙
人

个人识别码
个人优先
人名


int
瓦尔查尔
瓦尔查尔


int
瓦尔查尔
瓦尔查尔


PRI

桌子
字段名
数据类型
大小
钥匙
汽车

车号
汽车模型
汽车价格
个人识别码


int
瓦尔查尔
瓦尔查尔


int
瓦尔查尔
瓦尔查尔


PRI
-
-
FK