Javascript 不带'；t重置内容_Javascript_Jquery_Html_Twitter Bootstrap_Menu

Javascript 不带'；t重置内容

javascript jquery html twitter-bootstrap menu

Javascript 不带'；t重置内容,javascript,jquery,html,twitter-bootstrap,menu,Javascript,Jquery,Html,Twitter Bootstrap,Menu,我正在用jQuery和bootstrap3构建一个webapp。在我的主页上（见下面的代码），我希望有一个包含两个项目的导航菜单，每个项目都指向不同的内容 <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&

我正在用jQuery和bootstrap3构建一个webapp。在我的主页上（见下面的代码），我希望有一个包含两个项目的导航菜单，每个项目都指向不同的内容

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



面板A
B组

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

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

我应该改为使用iframe还是隐藏div，这在代码方面看起来如何？

在页面加载中，通过ajax加载选项卡内容并将其附加到dom中。使用引导选项卡：您可以使用引导选项卡，或者您可以使用分区并使用隐藏/显示。我已经尝试使用引导选项卡，这确实解决了我的部分问题。然后我意识到，我的不同页面html子文件之间的Javascript变量/函数可能存在冲突/重复（因为所有内容都加载到同一个“主体”）。那么，在我的Javascript代码中是否可以使用某种“名称空间”，或者我是否应该确保每个JS变量/函数在所有页面文件中都有一个唯一的名称？或者使用iframes？在页面加载中，通过ajax加载选项卡内容并将其附加到dom中。使用引导选项卡：您可以使用引导选项卡，或者您可以使用分区并使用隐藏/显示。我已经尝试使用引导选项卡，这确实解决了我的部分问题。然后我意识到，我的不同页面html子文件之间的Javascript变量/函数可能存在冲突/重复（因为所有内容都加载到同一个“主体”）。那么，在我的Javascript代码中是否可以使用某种“名称空间”，或者我是否应该确保每个JS变量/函数在所有页面文件中都有一个唯一的名称？还是使用iframes？