-1
我怎麼叫通過Ajax從一個單獨的容器 內容（網址：http://internetbusinesspotential.com/cdc/slidedown-menu2.html）AJAX調用不會滑下菜單操作，它不會加載從HTML文件內容
這是我的問題，我試圖調用一個html文件，以ajax調用來填充頁面上的#content容器。我已經對ul =「nav」菜單的主要li元素使用了Javascript下拉效果。這裏是div特異性：#maincontainer #leftMenu #nav li a
我知道這是簡單的東西，我只是忽略它。
的＃內容容器經過與負載GIF的運動，然後再返回，如果你點擊子導航元素
請幫助甚至會重新加載歸屬的內容！
頭文件的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slide down menu</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slidedown-menu2.css">
<script type="text/javascript" src="js/slidedown-menu2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/contentBase.css">
<link rel="stylesheet" href="css/css.css">
<script type="text/javascript" src="js/js.js"></script>
HTML：
<body>
<div id="mainContainer">
<div id="leftMenu">
<h3><a href="#">Topic Homepage</a></h3>
<!-- START OF MENU -->
<div id="nav_slidedown_menu">
<ul id="nav">
<li><a href="article1.html">Products</a>
<ul>
<li><a href="#">Menus</a>
<ul>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Download</a></li>
</ul>
</li>
<li><a href="#">Demo</a></li>
</ul>
</li>
<li><a href="#">Calendar scripts</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
<li><a href="#">Is it cross browser?</a>
<ul>
<li><a href="#">yes it is</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Window scripts</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
</ul>
</li>
<li><a href="#">Form widgets</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="article2.html">Support</a>
<ul>
<li><a href="#">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">QnA</a></li>
</ul>
</li>
<li><a href="article3.html">History</a>
<ul>
<li><a href="#">1900 - 1940</a></li>
<li><a href="#">1941 - 1980 </a></li>
<li><a href="#">1981 - Present time</a></li>
</ul>
</li>
<li><a href="article4.html">The team</a>
<ul>
<li><a href="#">Person A</a>
<ul>
<li><a href="#">CV</a>
<ul>
<li><a href="#">Job 1</a></li>
<li><a href="#">Job 2</a></li>
<li><a href="#">Job 3</a></li>
</ul>
</li>
<li><a href="#">Education</a></li>
<li><a href="#">Experience</a>
<ul>
<li><a href="#">Job 1</a>
<ul>
<li><a href="#">Accomplished this</a></li>
<li><a href="#">Accomplished that</a></li>
</ul>
</li>
<li><a href="#">Job 2</a></li>
<li><a href="#">Job 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Person B</a></li>
<li><a href="#">Person C</a></li>
<li><a href="#">Person D</a></li>
<li><a href="#">Person E</a></li>
</ul>
</li>
<li><a href="article5.html">Locations</a>
<ul>
<li><a href="#">Norway</a></li>
<li><a href="#">United States</a></li>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">Sweden</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">Finland</a></li>
</ul>
</li>
</ul>
</div>
<div class="bottom"></div>
<!-- END OF MENU -->
<script type="text/javascript">
initSlideDownMenu();
</script>
</div>
<div class="contentContainer">
<div id="wrapper">
<div id="content">
<h2>Welcome!</h2>
<p>This is where the content will load in here...</p>
</div>
</div>
</div>
</div>
</body>
的JavaScript：
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
CSS：
@charset "utf-8";
/* CSS Document */
/*
General rules
*/
#mainContainer #leftMenu{
position:relative;
margin:0;
padding:0/* 12px 0 0*/;
height:auto;
width:179px;
color:#fff;
clear:both;
float:left;
background:transparent url('../img/bg_leftNav_new.gif') repeat-y top left;
}
.optional #leftMenu {z-index:10;}
#leftMenu, #mainContainer .bottom {background:transparent url('../img/bg_leftNav_new.gif') repeat-y top left;}
.topicHome #nav_slidedown_menu li#local-az-link {display:none;}
body #mainContainer h3 a {
background-image: url('../img/bg_leftMenuH3_blue.gif');
color: #FFF;
line-height: 28px;
padding-left: 5px;
}
#leftMenu,
#mainContainer .bottom {
background: transparent url('../img/bg_leftMenu_blue.gif') repeat-y top left;
}
/* Active menu item */
#nav_slidedown_menu .nav_activeItem {
font-weight:bold;
color: #ccc;
}
#nav_slidedown_menu li{
list-style-type:none;
position:relative;
}
#nav_slidedown_menu ul{
margin:0px;
padding:0px;
position:relative;
}
#nav_slidedown_menu div{
margin:0px;
padding:0px;
}
/* Layout CSS */
#nav_slidedown_menu .slideMenuDiv2{
width:175px;
}
#nav_slidedown_menu .slideMenuDiv3{
width:225px;
}
#nav_slidedown_menu{
width:205px;
}
/* All A tags - i.e menu items. */
#nav_slidedown_menu a{
color: #fff;
text-decoration:none;
display:block;
clear:both;
width:170px;
padding-left:2px;
}
/* Active menu item */
#nav_slidedown_menu .nav_activeItem {
font-weight:bold;
color: #CCC;
}
/*
A tags
*/
#nav_slidedown_menu .slMenuItem_depth1{ /* Main menu items */
margin-top:0px;
background: #4a6bad;
font-weight:bold;
padding: 5px .5px 5px 5px;
}
#nav_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */
margin-top:0px;
background: #7faee2;
font-weight:bold;
padding: 5px .5px 5px 15px;
}
#nav_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */
margin-top:0px;
background: #dcecfb;
color: #000;
padding: 5px .5px 5px 25px;
}
#nav_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */
margin-top:0px;
background: #edf5fe;
color: #000;
padding: 5px .5px 5px 25px;
}
#nav_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */
margin-top:0px;
background: #fff;
color: #000;
padding: 5px .5px 5px 25px;
}
/* UL tags, i.e group of menu utems.
It's important to add style to the UL if you're specifying margins. If not, assign the style directly
to the parent DIV, i.e.
#nav_slidedown_menu .slideMenuDiv1
instead of
#nav_slidedown_menu .slideMenuDiv1 ul
*/
#nav_slidedown_menu .slideMenuDiv1 ul{
padding:1px;
}
#nav_slidedown_menu .slideMenuDiv2 ul{
margin:0px;
padding: 0px 10px 0px 0px;
}
#nav_slidedown_menu .slideMenuDiv3 ul{
margin-left:0px;
padding: 0px 10px 0px 0px;
}
#nav_slidedown_menu .slMenuItem_depth4 ul{
margin-left:15px;
padding:1px;
}
#mainContainer .bottom { /* bottom */
position:relative;
margin:0 0 0em 0;
height:15px; /** = height of bottom cap/shade */
width:179px;
border:none;
background-color:#4a6bad;
background-position:bottom left;
}
#mainContainer .bottom {
background: transparent url('../img/bg_leftNav_new.gif') repeat-y bottom left;
}
#wrapper {
width: 480px;
margin: 10px 0 0 15px;
background: #0d0d0d url(img/header.jpg) no-repeat;
padding: 58px 25px 55px 25px;
border: 12px solid #2e2e2e;
position:relative;
}
h1 {
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0.3em 0;
text-indent:-99999px;
}
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background:url(../img/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
.contentContainer { float:left; width: 200px;}
#content {
}
h2 {
margin: 0;
padding: 0.5em 0;
color:#568945;
font-family:Helvetica, Arial, Sans-serif;
}
p {
margin: 0;
padding: 0.4em 0;
color:#686868;
line-height:1.4em;
}
#content img.right {
float: right;
margin: 0 0 8px 8px;
}
#foot {
padding: 15px;
color: white;
text-align: center;
margin: 30px 0 0 0;
border-top:1px solid #222222;
}