Question

我正在创建一个网页。这是关注点。该页面的左端有导航链接作为侧边栏，主要内容区域位于中心。我想打开每个链接，其相应的数据应显示在主要内容区域（其余数据隐藏）。

请帮我实现这一点。下面给出了我的网页视图

<body onload="myFuntion()">
    <div id="header">
        <h3>Michaels Mob App Automation Dashboard</h3>
    </div> 
    <div id="nav">
        <a href="#"  target="_self">iOS</a><br>
        <a name="Android" href="#" target="_self">Android</a><br>
        <a href="#" target="_self">KickOff</a><br>
        <a href="#" target="_self">Run</a><br>
    </div>    
    <div id="section">    
        <table>
            <tr><td> TestCase: </td> <td><input type ="text" name ="TestCase"></td><br>
            <td> Execution Status :  </td> <td><input type ="text" name ="Status"></td></tr><br>

            <p>
                enganunnd?:P
                You might need to add the rows dynamically here using jscript.    
                iOS text    
            </p>
        </table> 
    </div>    
    <div id="footer">
        <a href="#" target="_blank">Graph View</a>/
        <a href="#" target="_blank">List View</a>
    </div>
</body>

Answer 1

如果这是一个选项，您可以使用jQuery Load功能。 http://api.jquery.com/load/

$("#nav a").click(function(){    
$( "#section" ).load( "pages/test.html" );
});

Answer 2

这是指加载部分视图或 html片段。

jQuery拥有它们：http://api.jquery.com/load/
AngularJS有他们：https://docs.angularjs.org/api/ng/directive/ngInclude
您也可以使用<iframe>
您也可以使用XHR

Answer 3

如果可以让每个链接在地址栏中显示相同的URL，并且除非您需要从服务器获取每个“页面”的所有数据，最好将每个页面/部分硬编码到一个HTML文档，并使用导航链接作为触发器，使用CSS显示/隐藏每个部分。这消除了Ajax调用，加载每个部分会更快。您仍然可以通过在必要时附加DOM节点来动态填充每个部分的数据。

如何使用同一页面中显示的内容打开每个链接

3 个答案: