如何重新连接 Javascript 文件
Posted
技术标签:
【中文标题】如何重新连接 Javascript 文件【英文标题】：How reconnect Javascript File 【发布时间】：2014-09-16 21:17:12 【问题描述】：我有 index.html、Home.html 和 AboutUs.html
-
index.html：那是我页面的框架
Home.html：它有 1 个图像滑块
AboutUs.html：只有文本。
我的页面从 index.html 开始。加载后，我使用 jquery 将滑块的 html 代码从 Home.html 插入到 div。它正在工作。 当我点击 About Us 时，我用 jQuery 从 AboutUs.html 更改了 div 中的 html 代码。它也可以正常工作。
但是当我点击返回主菜单时，滑块不起作用。 javascript 文件已断开连接。
我在 index.html 链接了所有 Javascript 和 CSS 文件。
我的 index.html 和 Jquery 代码
<html>
<head>
<title>IVORY:SAMPLE ONE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js/js-image-slider.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/generic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function()
$('#control').load('Home.html #controlHome') ;
$('#home').click(function ()
$('#control').load('Home.html #controlHome') ;
);
$('#men').click(function ()
$('#control').load('Men.html ') ;
);
$('#women').click(function ()
$('#control').load('Women.html ') ;
);
$('#cosmetics').click(function ()
$('#control').load('Cosmetics.html ') ;
);
$('#accessories').click(function ()
$('#control').load('Accessories.html ') ;
);
$('#services').click(function ()
$('#control').load('Services.html ') ;
);
$('#aboutus').click(function ()
$('#control').load('AboutUs.html') ;
);
);
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="sub_header">
<h1 id="h1_aaa">I V O R Y - C O L L E C T I O N</h1>
<br>
<h2 style="font-family: Monotype Corsiva,sans-serif;font-size: 45;color: #c24678;padding-top:100px;" id="h2_bbb">Make Yours Dream Come True </h2>
<div class="menu_div">
<ul id="menu-bar">
<div id="menu_div">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="men">Men</a></li>
<li><a href="#" id="women">Women</a></li>
<li><a href="#" id="cosmetics">Cosmetics</a></li>
<li><a href="#" id="accessories">Accessories</a></li>
<li><a href="#" id="services">Services</a></li>
<li><a href="#" id="aboutus">About Us</a></li>
</div>
</ul>
</div>
</div>
</div>
<div id="control">
</div>
</div>
</body>
</html>
【问题讨论】：
jQuery 可能需要先加载。重新排序<script> 标签
你确定点击“返回首页”后JavaScript没有错误吗？如果出现任何运行时错误，JavaScript 将被禁用。
我从 Home 链接中删除了“#”，现在它可以工作了。非常感谢你
【参考方案1】：
<html>
<head>
<title>IVORY:SAMPLE ONE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js/js-image-slider.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/generic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function()
$('#control').load('Home.html #controlHome') ;
$('#home').click(function ()
$('#control').load('Home.html #controlHome') ;
);
$('#men').click(function ()
$('#control').load('Men.html ') ;
);
$('#women').click(function ()
$('#control').load('Women.html ') ;
);
$('#cosmetics').click(function ()
$('#control').load('Cosmetics.html ') ;
);
$('#accessories').click(function ()
$('#control').load('Accessories.html ') ;
);
$('#services').click(function ()
$('#control').load('Services.html ') ;
);
$('#aboutus').click(function ()
$('#control').load('AboutUs.html') ;
);
);
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="sub_header">
<h1 id="h1_aaa">I V O R Y - C O L L E C T I O N</h1>
<br>
<h2 style="font-family: Monotype Corsiva,sans-serif;font-size: 45;color: #c24678;padding-top:100px;" id="h2_bbb">Make Yours Dream Come True </h2>
<div class="menu_div">
<ul id="menu-bar">
<div id="menu_div">
<li><a href="" id="home">Home</a></li>
<li><a href="#" id="men">Men</a></li>
<li><a href="#" id="women">Women</a></li>
<li><a href="#" id="cosmetics">Cosmetics</a></li>
<li><a href="#" id="accessories">Accessories</a></li>
<li><a href="#" id="services">Services</a></li>
<li><a href="#" id="aboutus">About Us</a></li>
</div>
</ul>
</div>
</div>
</div>
<div id="control">
</div>
</div>
</body>
</html>
【讨论】：
【参考方案2】：<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/js-image-slider.js" type="text/javascript"></script>
脚本标签需要重新排序。
【讨论】：
以上是关于如何重新连接 Javascript 文件的主要内容，如果未能解决你的问题，请参考以下文章