我在外部HTML JavaScript沒有加載

Question

確定，所以爲了這裏是我的代碼

/* *的index.html/

<!-- jQuery Scripts --> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> 
    <script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script> 
    <link href="http://tdr.host22.com/scripts/tdr.css" rel="stylesheet" type="text/css"> 
    <!-- Div Layout --> 
    <div id="container"> 
    <div id="dp">my DP here</div> 
    <div id="hrefs"> 
     <ul id="menu"> 
     <li><a id="home">Home</a></li> 
     <li><a id="about">About Me</a></li> 
     <li><a id="shop">My Shop/Wishlist</a></li> 
     <li><a id="friend">My Friends</a></li> 
     <li><a id="vids">Wicked Videos</a></li> 
     <li><a id="music">Music Playlist</a></li> 
     <li><a id="pics">My Pictures</a></li> 
     <li><a id="ranks">My Rankings</a></li> 
     <li><a id="stuff">Random Stuff</a></li> 
     <li><a id="read">Read Messages</a></li> 
     <li><a id="leave">Leave a Message</a></li> 
     </ul> 
    </div> 
    <div id="content"> 
    TDR Content 
     <div id="loading"> 
     <img src="images/loading.gif" alt="Loading..." /> 
     </div> 
    </div> 
    </div> 

/* * li.js/

$(document).ready(function(){ 
//References 
var sections = $("#menu a"); 
var loading = $("#loading"); 
var content = $("#content"); 

//Manage click events 
sections.click(function(){ 
    //show the loading bar 
    showLoading(); 
    //load selected section 
    switch(this.id){ 
    case "home": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #home_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "about": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #aboutme_panel", hideLoading); 
    content.slideDown(); 
    break; 
    case "shop": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #shop_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "friend": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #friend_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "vids": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #vids_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "music": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #music_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "pics": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #pics_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "ranks": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #ranks_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "stuff": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #stuff_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "read": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #read_section", hideLoading); 
    content.slideDown(); 
    break; 
    case "leave": 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #leave_section", hideLoading); 
    content.slideDown(); 
    break; 
    default: 
    //hide loading bar if there is no selected section 
    hideLoading(); 
    break; 
    } 
}); 

//show loading bar 
function showLoading(){ 
    loading 
    .css({visibility:"visible"}) 
    .css({opacity:"1"}) 
    .css({display:"block"}) 
    ; 
} 
//hide loading bar 
function hideLoading(){ 
    loading.fadeTo(1000, 0); 
}; 
}); 

/* * sections.html/

<div id="home_section"> 
Home haha 
</div> 
<!-- About Us --> 
<div id="about_section"> 
<script type='text/javascript'><!-- 
imvu_avatar_name = "TheDarkRaver"; 
imvu_panel_name = "aboutme_panel"; 
imvu_section_name = "mp_left"; 
imvu_panel_width = 590; 
imvu_panel_height = 459; 
//--></script> 
</div> 

/* * tdr.css/

@CHARSET "UTF-8"; 
/******* GENERAL RESET *******/ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td { 
border: 0pt none; 
font-family: inherit; 
font-size: 100%; 
font-style: inherit; 
font-weight: inherit; 
margin: 0pt; 
padding: 0pt; 
vertical-align: baseline; 
} 
/*Removing Bullets*/ 
#menu { 
    padding:0; 
    margin:0; 
    width:0; 
} 
#menu li { 
list-style-type:none; 
display: inline; 
} 
/*Menu Link Style */ 
#menu a, #menu a:visited { 
    position:relative; /* ADDED */ 
    display:block; 
    width:9em; 
    cursor: crosshair; 
    border:1px solid orange; 
    font-family:cursive, sans-serif; 
    font-size:0.7em; 
    text-align:center; 
    text-decoration:none; 
    background:transparent; 
    color:orange; 
    padding:0.25em; 
} 
#menu a:hover { 
color:red; 
border:1px solid red; 
} 
#container { 
position:relative; 
width: 700px; 
height:400px; 
background-color: transparent; 
border: 1px; 
border-color:orange; 
border-style: dotted; 
margin: 0pt auto; 
} 
#hrefs { 
width:0px; 
} 
#content { 
position: absolute; 
top:0px; 
left:9.8em; 
width:580px; 
height:100%; 
border:1px solid #0066CC; 
background-color:transparent; 
background-image: url("../images/cont.png"); 
background-repeat: repeat; 
overflow: auto; 
color: #000000; 
line-height: 1.3em; 
font-size: 12px; 
} 
#dp { 
position:absolute; 
bottom:0px; 
left:0px; 
} 
#loading{ 
    text-align: center; 
    visibility: hidden; 
} 
.clear{ 
clear: both; 
height: 0; 
visibility: hidden; 
display: block; 
} 

Answer 1

像尼克說的，你可能不包括jQuery，在Firebug或類似的東西中是否有任何錯誤？

而且，你可能要考慮的東西更像是取代大部分的巨大switch的：

content.slideUp(); 
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading); 
content.slideDown(); 

編輯： 爲了這個最後部分更加清晰，首先進入你的標記和變化：

<li><a id="about">About Me</a></li> 

到

<li><a id="aboutme">About Me</a></li> 

這是因爲在你的JavaScript你展示一個名爲「aboutme」部分...最好只保留匹配的名稱....然後刪除整個switch並將其替換爲：

content.slideUp(); 
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading); 
content.slideDown(); 

所以你代碼的整個JavaScript的部分變（與其他一些改進）：

$(document).ready(function() { 
    var sections = $("#menu a"); 
    var loading = $("#loading"); 
    var content = $("#content"); 

    function showLoading() { 
    loading.css({ 
     visibility: 'visible', 
     opacity: 1, 
     display: 'block' 
    }); 
    } 

    function hideLoading(){ 
    loading.fadeTo(1000, 0); 
    } 

    sections.click(function() { 
    showLoading(); 
    content.slideUp(); 
    content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading); 
    content.slideDown(); 
    }); 
}); 

正如你可以看到，這段代碼甚至不需要評論，因爲它是如此簡明扼要。

此外，通過閱讀，似乎你幾乎肯定有其他問題...動畫不會按照您期望的方式發生，slideUp是異步的，意味着它將開始向上滑動然後立即加載，您可能不想要這種行爲，因此請查看jQuery鏈接動畫的方法（通過回調，請參閱slideUp的文檔，例如），或者看看jQuery 1.4的delay方法。

Answer 2

我沒有看到你加載jQuery的任何地方......你必須包括在某個時刻庫本身的代碼之前，像這樣的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
<script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script> 

Answer 3

您是否嘗試過在您的瀏覽器中打開http://tdr.host22.com/scripts/li.js？你應該能夠直接下載文件。

也許你意外啓用了一些用戶身份驗證你的腳本文件夾？

我還建議使用沒有域名的路徑，即/scripts/li.js，以便在網站移動到另一個域時不必更改它。

Answer 4

中的JavaScript在sections.html裏面<div id="about_section">

content.load("http://tdr.host22.com/sections.html #home_section", hideLoading);只會加載<div id="home_section">從sections.html

從sections.html加載JavaScript試試這個

content.load("http://tdr.host22.com/sections.html #about_section", hideLoading);