Meine Navbar wird nicht nach dem Laden der Seite auf Div durch js

Ich habe Probleme mit meiner Navbar, weil irgendwie, wenn ich zu sehen, die Kollaps-Taste und klicken Sie auf eine der Optionen, die dort erscheinen, wenn ich versuche, es zu reduzieren, es bleibt hängen und wird nicht normal, wenn ich die Seite nicht aktualisiere.Meine Navbar wird nicht nach dem Laden der Seite auf Div durch js

Dies ist der HTML-Code, mit der Seite arbeitet

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

Dies ist die Javascript ist, die die Seiten einmal die navbar Bereich (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; 

    }); 
});

EDIT geklickt lädt: Bereits gelöst das problem, es musste mit den seiten geladen werden hatte einige probleme mit der art wie sie strukturiert waren.

Quelle

2016-12-23 MarcellHS93

Keine Notwendigkeit, dieses Click Event manuell aufzurufen, bootstrap wird sich selbst behandeln. – aavrug

Das Problem ist, dass es normal funktionierte, bevor ich die Click-Funktion hinzufügte, aber es die Seite nicht ohne Neuladen geladen hat. Ich versuche, das div nach der navbar zu ändern, ohne url zu ändern, aber nachdem ich die js hinzugefügt habe, tut es genau das, aber jetzt wird es die navbar – MarcellHS93

ich Ihren Code aktualisiert haben, nutzen Sie bitte die unten angefügten meine Geige Link überprüfen,

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

Dank.

Quelle

2016-12-23 05:04:22 Bhavanaditya

nicht zusammenklappen Es sieht dasselbe für mich aus. Das ist, was es getan hat, bevor es die Seiten im Div nach der Navigationsleiste durch diese js-Datei geladen hat. – MarcellHS93

Meine Navbar wird nicht nach dem Laden der Seite auf Div durch js

Antwort

Verwandte Themen