我的导航栏不会在通过js加载div页面后崩溃

我的导航栏出现问题，因为某种程度上，当我看到折叠按钮并单击其中一个出现的选项时，我尝试折叠它，它会卡住，除非刷新页面，否则不会恢复正常。我的导航栏不会在通过js加载div页面后崩溃

这是与页作品

<!DOCTYPE html> 
<html> 
<head> 
    <title>Main Page</title> 
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <link rel="stylesheet" href="../css/bootstrap.css"> 
    <link rel="stylesheet" href="../css/Style.css"> 

</head> 
<body> 
    <div class=""> 
     <header> 
      <nav class="navbar navbar-inverse" id="nav"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1"> 
          <span class="sr-only">Menu</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a href="" class="navbar-brand">Ans Dashboard</a> 
        </div> 
        <div class="collapse navbar-collapse text-center" id="navbar-1"> 
         <ul class="nav navbar-nav"> 
          <li class="" data-target="customer_main"><a href=""><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></a></li> 
          <li class="" data-target="inventorypage"><a href=""><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></a></li> 
          <li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></a></li> 
          <li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></a></li> 
         </ul> 
         <div class="navbar-right text-center"> 
          <ul class="nav navbar-nav"> 
           <form method="post" class="nav navbar-nav"> 
            <li><p class="navbar-text"><?php echo "Welcome"?><p></li> 
            <li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?> 
            <?php 
             include("logout.php"); 
            ?> 
            </button></li> 
           </form> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </nav> 
     </header> 
    </div> 
    <!-- end of navbar--> 
    <div id="content"> 
     <!-- Js page loads here --> 
    </div> 

    <script src="../js/jquery-3.1.1.min.js"></script> 
    <script src="../js/mainpage.js"></script> 
    <script src="../js/bootstrap.min.js"></script> 
    </body> 
</html>

这是一次导航栏区域被点击（mainpage.js）

$(document).ready(function() 
{ 
var trigger = $('#navbar-1 ul li'), container = $('#content'); 

trigger.on('click', function(){ 

    var $this = $(this), target = $this.data('target'); 

    container.load(target + '.php'); 

    trigger.removeClass("active"); 
    $this.addClass("active"); 

    return false; 

    }); 
});

编辑加载页面的JavaScript的HTML：已经解决问题，它必须与加载页面有一些问题，他们的结构。

来源

2016-12-23 MarcellHS93

无需手动调用此单击事件引导将自行处理。 – aavrug

问题是，在我添加点击功能之前它正常工作，但它没有在没有重新加载的情况下在那里加载页面。我试图更改导航栏后的div而不更改url，但是在我添加了js后，它确实如此，但现在它不会折叠导航栏 – MarcellHS93

我已经更新了你的代码，请检查下面附加了我的小提琴链接，

$(document).ready(function() { 
    var trigger = $('#navbar-1 ul li'), 
    container = $('#content'); 
    trigger.on('click', function() { 
    var $this = $(this), 
     target = $this.data('target'); 
    container.load(target + '.php'); 
    trigger.removeClass("active"); 
    $this.addClass("active"); 
    return false; 
    }); 
});

fiddle

感谢。

来源

2016-12-23 05:04:22 Bhavanaditya

它对我来说看起来是一样的。这就是它在通过该js文件导航栏后在div中加载页面之前所做的。 – MarcellHS93

我的导航栏不会在通过js加载div页面后崩溃

回答

相关问题