мой Javascript во внешнем HTML не загружается

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(); 

Edit: Чтобы быть более четкое представление о этой последней части первой идти в разметке и изменения :

<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

Для загрузки JavaScript из sections.html попробовать этот

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