Question

我正在使用jQuery和Bootstrap 3构建一个webapp。在我的主页面上（见下面的代码），我想要一个包含2个项目的导航菜单，每个项目都指向不同的内容。

<html lang="en">

<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="././Bootstrap-3.3.5/js/bootstrap.min.js"></script>

<link href="./Bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div id = "menu">
             <ul class = "nav navbar-nav">
                <li class = "active"><a>Panel A</a></li>
                <li><a>Panel B</a></li>
             </ul>
        </div>
    </nav>

    <div id="content" class="container-fluid">
    </div>
</body>
</html>

我希望我的2个内容（A＆amp; B）存储在单独的HTML文件中，我需要用户能够在面板A和B之间无缝切换，而不会丢失每个面板的状态（即我在面板A上，然后我转到面板B并返回到面板A：面板A应该处于与我离开时完全相同的状态）。我还需要在首次访问时动态加载这些面板文件。

我试图让我的菜单项通过a加载面板内容，但这不会起作用，因为它会重置此面板的状态。

我应该改为使用iframe或隐藏的div，以及这看起来如何代码行？

不会重置内容的HTML导航菜单

0 个答案: