显示和加载一次

我遇到的问题是我只希望显示已单击的页面，发生的事情是如果我单击（＃dashboard），然后稍后（＃statss）），内容重叠..

如何防止内容之间的重叠？我想要的是，如果我单击（一个＃统计），则（＃dashboard）和（＃log）必须是空闲的。

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a id = "DataOne"><span class="glyphicon glyphicon-home" style="font-size:25px;" aria-hidden="true"></span></a></li>
                <li><a id = "DataTwo"><span class="glyphicon glyphicon-list-alt" style="font-size:25px;" aria-hidden="true"></span></a></li>
                <li><a id = "DataThree"><span class="glyphicon glyphicon-stats" style="font-size:25px;" aria-hidden="true"></span></a></li>
              </ul>
            </div>
          </div>
        </nav>
<script type="text/javascript">
        $('a#dashboard').on('click',function(){
          $("#page1").load("page1.html");   
        });
        $('a#log').on('click',function(){
          $("#page2").load("page2.html"); 
        });
        $('a#stats').on('click',function(){
          $("#page3").load("page3.html"); 
        });                
</script>

@lelio faieta，这是三个divs的HTML，我在下面放了Page1.html的内容。 index.html

         ......
        <script> 
            $(function(){
            $("#TopMenu").load("TopNavigationBar.html");
            }); 
        </script> 
   </head>
    <body>
          <div id="TopMenu"></div>
          <div id="page1"></div>
          <div id="page2"></div>
          <div id="page3"></div>
    </body>

page1.html

<script type="text/javascript">
  $("#dashboard").load("dashi.html"); 
</script>
<div>
      <div id="dashboard"></div>
</div>

在加载内容之前将所有三个div添加到所有三个div中，并将其全部倒入。所以：

$('a#dashboard').on('click',function(){
  $('.pages').empty();
  $("#page1").load("page1.html");   
});
$('a#log').on('click',function(){
  $('.pages').empty();
  $("#page2").load("page2.html"); 
});
$('a#stats').on('click',function(){
  $('.pages').empty();
  $("#page3").load("page3.html"); 
});

相关内容

最新更新

热门标签：