[英]my javascript in external html is not loading
好,所以为了这是我的代码
/ * 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;
}
就像尼克所说,您可能不包括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
,似乎几乎可以肯定还有其他问题...动画不会按您预期的方式发生, slideUp
是异步的,这意味着它将开始向上滑动然后立即加载,您可能不希望这种行为,所以查看jQuery的动画链接方法(例如,通过回调,请参见slideUp
的文档),或查看jQuery 1.4的delay
方法。
我看不到您在任何地方加载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>
您是否尝试在浏览器中打开http://tdr.host22.com/scripts/li.js ? 您应该可以直接下载文件。
也许您不小心在脚本文件夹中启用了某些用户身份验证?
我也建议您使用不带域名的路径,即/scripts/li.js,这样,当站点移至另一个域时,您不必更改它。
中的JavaScript在sections.html是内<div id="about_section">
content.load("http://tdr.host22.com/sections.html #home_section", hideLoading);
只会从sections.html加载<div id="home_section">
要从sections.html加载JavaScript,请尝试以下操作
content.load("http://tdr.host22.com/sections.html #about_section", hideLoading);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.