jQuery menu - JavaScript, Ajax

spein · 06.07.2009, 18:31

Скрипт загрузки страницы.
Проблема в том что когда пытаюсь загрузить папку, а не html файл - опо тупо грузит главную страницу но пустую и в адресе уже нету #content

Код:

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

});

SkyM@n · 06.07.2009, 19:09

Цитата:

Сообщение от spein

Скрипт загрузки страницы.

Что-то я не совсем понял - при чем меню до скрипта загрузки страницы?

spein · 06.07.2009, 22:00

вот главная страница и стиль. Может догадаетесь...

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
        <li><a href="test.html">TEST</a></li>
    </ul>
    <div id="content">    	
        <h2>Welcome!</h2>
        <p>Hi, welcome to the demonstration for the NETTUTS tutorial - "How to Load In and Animate Content with jQuery"</p>
        <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome effects...</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>

Код:

@charset "utf-8";
/* CSS Document */

body {
	font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	color: #343434;
	background: #121212;
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 710px;
	margin: 30px auto;
	background: #0d0d0d url(images/header.jpg) no-repeat;
	padding: 55px 25px 25px 25px;
	border: 12px solid #2e2e2e;
	position:relative;
}
h1 {
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 0.3em 0;
	text-indent:-99999px;
}
#nav {
	list-style: none;
	padding: 0;
	margin: 10px 0 20px 0;
	background: #2e2e2e url(images/nav_bar.jpg) repeat-x;
	display: block;
	overflow: hidden;
	font-size: 0.9em;
	height:33px;
	text-transform:capitalize;
}
#nav li {
	display: inline;
}
#nav li a {
	display: block;
	float: left;
	padding: 10px 20px;
	color: white;
	text-decoration: none;
}
#nav li a:hover {
	background: #1b1b1b url(images/nav_bar_o.jpg) repeat-x;
}
#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

#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;
}

SkyM@n · 06.07.2009, 22:45

Цитата:

Сообщение от spein

вот главная страница и стиль. Может догадаетесь...

А может не будем играть в кошки-мышки? Или данная тема как-то относится к игре "Угадай-ка"?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Lightbox jQuery конфликтует с Ajax	Schwarz	JavaScript, Ajax	5	18.01.2014 11:56
jQuery: навигация по DOM, разворачивающиеся списки	wall66	JavaScript, Ajax	1	01.07.2009 22:09
jQuery - подробное руководство по продвинутому JavaScript	Mixasik	JavaScript, Ajax	2	21.06.2009 17:19
Вопрос по библиотеке jQuery	Help_me	JavaScript, Ajax	5	04.03.2009 12:57
List/MENU или Jump Menu с mysql	vanDJ	PHP	0	09.02.2009 11:19