这是我的Html代码index.html
<body>
<div id="container">
<div id="header">
<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 id="control">
<p style="position:relative;">Lorem Ipsum...</p>
</div>
</div>
</body>
这是我的Jquery代码,用于更改外部div
<script type="text/javascript">
$(document).ready(function(){
$('#aboutus').click(function () {
$('#control').load('AboutUs.html #controlAboutUs') ;
});
});
</script>
这是我的外部Html.AboutUs.html
<html>
<head>
<title>About us</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="controlAboutUs">
<div>
<h3>Welcome From Ivory's Collection</h3>
<p>
We export …我有index.html,Home.html和AboutUs.html
我的页面从index.html开始.加载后,我使用jquery从Home.html插入滑块的html代码.它正在发挥作用.当我点击关于我们时,我用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 ') ;
}); …