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

Question

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

Answer 1

请查看以下示例：

$(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>