解決html頭部中的外部資源

在下面的代碼中，index.html頁面在瀏覽器中沒有按照它在index.html頭部鏈接的CSS和js進行樣式化。關閉body標籤前還有一個腳本標籤。我嘗試刪除「..」，並無緣無故地玩弄路徑。解決html頭部中的外部資源

index.html的兄弟姐妹的文件夾：
CSS，JS和jquery.mobile-1.4.5

css文件夾中的內容：
index.css JS的

內容文件夾：
index.js
jquery-1.11.3

項

jquery.mobile-1.4.5文件夾的內容：

將在正確的頭標記決心的聯繫？如果沒有，請提出建議。由於

$("header .ui-btn-left").on("tap", drawerToggle); 
 
$(".contentDiv nav").on("swipeleft", drawerClose); 
 
$("ul").children("li").on("tap", navItemHandler); 
 
$(document).on("pagebeforeshow", middleButtonGone); 
 

 
function drawerToggle() { 
 
    var left = $("nav").offset().left; 
 
    var width = $("nav").width(); 
 
    if (left == 0) { 
 
     $("nav").css({ 
 
     "left" : -width 
 
     }); 
 
    } else { 
 
     $("nav").css({ 
 
     "left" : 0 
 
     }); 
 
    } 
 
} 
 

 
function drawerClose() { 
 
    var left = $("nav").offset().left; 
 
    var width = $("nav").width(); 
 
    if (left == 0) { 
 
     $("nav").css({ 
 
     "left" : -width 
 
     }); 
 
    } 
 
} 
 

 
function drawerOpen() { 
 
    var left = $("nav").offset().left; 
 
    var width = $("nav").width(); 
 
    if (left != 0) { 
 
     $("nav").css({ 
 
     "left" : 0 
 
     }); 
 
    } 
 
} 
 

 
function middleButtonToggle() { 
 
    if ($("footer ul").hasClass('ui-grid-b')) { 
 
     $("#extra").hide(); 
 
     $("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b"); 
 
    } else { 
 
     $("#extra").show(); 
 
     $("footer ul").removeClass('ui-grid-a').addClass('ui-grid-b').find("li").last().removeClass('ui-block-b').addClass("ui-block-c"); 
 
    } 
 
} 
 

 
function middleButtonGone() { 
 
    if ($("footer ul").hasClass('ui-grid-b')) { 
 
     $("#extra").hide(); 
 
     $("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b"); 
 
    } 
 
} 
 

 
function navItemHandler() { 
 
    var selected_index = $(this).index(); 
 
    drawerClose(); 
 
}

nav { 
 
    width: 80%; 
 
    position: fixed; 
 
    background-color: white; 
 
    left: 0; 
 
    top: 2em; 
 
    transition:left 0.3s ease; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>RRR</title> 
 
     <link rel="stylesheet" href="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/> 
 
     <script src="../js/jquery-1.11.3.js"></script> 
 
     <script src="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script> 
 
     <link rel="stylesheet" href="../css/index.css" /> 
 
     <meta name="viewport" content="width=device-width"/> 
 
    </head> 
 

 
    <body> 
 
     <header data-role="header" data-position="fixed"> 
 
     <a class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a> 
 
     <h1>Activity label</h1> 
 
     <a class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-gear">Info</a> 
 
     </header> 
 

 
     <div data-role="content" class="contentDiv"> 
 
     <form method="post" action="demoform.asp"> 
 
      <input type="text" name="fname" id="fname"> 
 
     </form> 
 

 
     <nav> 
 
      <ul data-role="listview" data-inset="true"> 
 
       <li> 
 
        <a href="#"><img src="css/images/image.png" alt="France" class="ui-li-icon ui-corner-none">France</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><img src="css/images/image.png" alt="Germany" class="ui-li-icon">Germany</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><img src="css/images/image.png" alt="Great Britain" class="ui-li-icon">Great Britain</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><img src="css/images/image.png" alt="Finland" class="ui-li-icon">Finland</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><img src="css/images/image.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a> 
 
       </li> 
 
      </ul> 
 
     </nav><!-- /side navigation --> 
 
     </div><!-- /content --> 
 

 
     <footer data-role="footer" data-position="fixed"> 
 
     <div data-role="navbar"> 
 
      <ul> 
 
       <li> 
 
        <button type="submit" data-theme="c"> 
 
        NO 
 
        </button> 
 
       </li> 
 
       <li id="extra"> 
 
        <button type="submit" data-theme="c"> 
 
        EXTRA 
 
        </button> 
 
       </li> 
 
       <li> 
 
        <button type="submit" data-theme="c"> 
 
        YES 
 
        </button> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     </footer><!-- footer --> 
 
     <script src="../js/index.js"></script> 
 
    </body> 
 
</html>

index.css

來源

2016-01-06 Fred J.

你的路是錯誤

如果index.html的是兄弟姐妹的資源文件夾，然後將路徑的文件夾應不是「../ some路徑」，它應該是「一些路徑」。

更改到頭部以下：

<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/> 
<script src="js/jquery-1.11.3.js"></script> 
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="css/index.css" />

變化在體內的末尾以下內容：

<script src="js/index.js"></script>

這可能是很好的瞭解相對path's，特別是關於一父目錄。

來源

2016-01-06 18:16:27

解決html頭部中的外部資源

回答

相關問題