CSS和Javascript不在我的本地主機PHP文件夾內工作

你好我正在嘗試實現一個頁面，我最初設計的HTML和CSS在javascript中的PHP文件。似乎沒有任何錯誤的CSS和JavaScript，因爲他們在原始HTML文件中工作正常。當我將代碼帶到一個php文件時，它最初的工作正常。現在側邊欄不會摺疊，並且按鈕似乎已恢復爲原始默認樣式。當我通過本地主機打開html文件時，會發生完全相同的情況，儘管它可以發現我是否在瀏覽器中打開它。我試圖回溯並找出導致這種情況的原因。我是PHP的新手，所以任何幫助表示讚賞。CSS和Javascript不在我的本地主機PHP文件夾內工作

我的PHP代碼：

<?php 
include('database.php'); 
session_start(); 

if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){ 
header('location: Index.php'); 
} 

?> 

<html> 
<head> 
<title>Yasalade</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
integrity="sha384- 
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
crossorigin="anonymous"> 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap- 
theme.min.css" integrity="sha384- 
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 
crossorigin="anonymous"> 
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
integrity="sha384- 
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
crossorigin="anonymous"></script> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
</script> 
<link rel="stylesheet" href="Style.css"> 
<script 
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> 
</script> 

</head> 

<body> 

<!-- Sidebar --> 
    <div id="wrapper"> 
    <div class="overlay"></div> 

    <!-- Sidebar --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" 
role="navigation"> 
     <ul class="nav sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="Main.html"> 
        Eventses 
       </a> 
      </li> 
      <li> 
       <a href="Main.html"><span class="glyphicon glyphicon-th-list">Main</span></a> 
      </li> 
      <li> 
       <a href="Profile.html"><span class="glyphicon glyphicon-user">Profile</span></a> 
      </li> 
      <li> 
       <a href="Events.html"><span class="glyphicon glyphicon-glass">Events</span></a> 
      </li> 

      <li> 
       <a href="Settings.html"><span class="glyphicon glyphicon-cog">Settings</span></a> 
      </li> 
      <li> 
       <a href="#"><span class="glyphicon glyphicon-envelope">Messages</span></a> 
      </li> 
      <li> 
       <a href="#">Logout</a> 
      </li> 
     </ul> 
    </nav> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> 
      <span class="hamb-top"></span> 
      <span class="hamb-middle"></span> 
      <span class="hamb-bottom"></span> 
     </button> 

    </div> 
    <!-- /#page-content-wrapper --> 

</div> 
<!-- /#wrapper --> 

<!-- Main body --> 
<div class="container" align="right"> 

     <div class="col-sm-10"> 
      <div class="bs-calltoaction bs-calltoaction-primary"> 
       <div class="row"> 
        <div class="col-md-9 cta-contents"> 
         <h2 class="cta-title">Event Title</h2> 
         <center><img src="default.png" alt="pic"></center> 
         <div class="cta-desc"> 
         <p3>Insert info about event</p3> 

         </div> 
        </div> 
        <a href=Analysis.html><button type="button" class="btn btn-primary btn-sm">Analyse</button></a> 
       </div> 
      </div> 

      <div class="bs-calltoaction bs-calltoaction-primary"> 
       <div class="row"> 
        <div class="col-md-9 cta-contents"> 
         <h2 class="cta-title">Event Title</h2> 
         <center><img src="default.png" alt="pic"></center> 
         <div class="cta-desc"> 
         <p3>Insert info about events</p3> 
         </div> 
        </div> 
        <a href=Analysis.html><button type="button" class="btn btn-primary btn-sm">Analyse</button></a> 
       </div> 
      </div> 

     </div> 
    </div> 


</body> 

</html> 

<script> 
$(document).ready(function() { 
var trigger = $('.hamburger'), 
    overlay = $('.overlay'), 
isClosed = false; 

trigger.click(function() { 
    hamburger_cross();  
}); 

function hamburger_cross() { 

    if (isClosed == true) {   
    overlay.hide(); 
    trigger.removeClass('is-open'); 
    trigger.addClass('is-closed'); 
    isClosed = false; 
    } else { 
    overlay.show(); 
    trigger.removeClass('is-closed'); 
    trigger.addClass('is-open'); 
    isClosed = true; 
    } 
} 

$('[data-toggle="offcanvas"]').click(function() { 
    $('#wrapper').toggleClass('toggled'); 
    }); 
}); 

</script>

來源

2017-06-02 Eoin Coogan

在Bootstrap JS之前應該包含jQuery **。什麼是兩個版本的Bootstrap JS？你有'3.3.6'和'3.1.1'。 – hungerstar

你有localhost系統上網嗎？也@hungerstar說你應該在Bootsrap js之前包含jquery。在頁面上的Chrome瀏覽器上按F12鍵，看看CONSOL選項卡上是否出現任何錯誤。 – AMH

爲什麼你包括boostrap css和js很多次？如果你沒有連接到網絡這些腳本將不會加載 –

至於其他用戶指出了引導和JQuery不是最新版本。現在它工作正常。

來源

2017-06-02 13:53:00

CSS和Javascript不在我的本地主機PHP文件夾內工作

回答

相關問題