11540 sujets

JavaScript, DOM et API Web HTML5

Cacher/afficher une div (problème vu et revu)

Bonjour,
je sais que mon problème a déjà fait moultes apparitions, mais si je poste sur ce forum c'est que aucune des solutions que j'ai vu ne marchaient.

Voici le Javascript qui fonctionne mais qui ne cache pas.
$(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;
		
	});

});


le code 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>
<title>titre</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>

<body>
<div id="global">
<div id="wrapper">
            <ul id="nav">
                <li><a href="index.html">Accueil</a></li>
                <li><a href="test_copie.html">À propos</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
            <a class="nav_bottom"></a>
            <div id="content"> 
                <h2>bla bla bla</h2>
                <p>bla bla bla bla bla bla bla bla bla bla bla</p>
            </div>
</div>
</div>


et enfin le css

#wrapper {
	width: 880px;
	margin: 0px auto;
	position:relative;
}

#nav {
	list-style: none;
	padding: 0;
	display: block;
	overflow: hidden;
	text-align:center;
	font-size: 13px;
	font-family: Helvetica,Arial,sans-serif;
}
#nav li {
	display: inline;
}
#nav li a {
	text-align:center;
	padding: 0px 20px;
	color: #999999;
    text-decoration: none;
    text-shadow: 1px 1px 0 #FFFFFF;
}
#nav li a:hover {
	color: #666666;
}
#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

.nav_bottom {
    background: url(../img/seperator_main.png) repeat-x scroll left bottom transparent;
    padding-top: 2px;
	margin-bottom:50px;
	display:block;
}

#content {
	
}


Je souhaite simplement: clique-lien 
<a href="index.html">Accueil</a>
il me l'ouvre, un autre clique il le ferme. Et ainsi de suite pour les autres.

Voila j'espère que vous pourrez m'éclairer car ça fait 2 jours que je suis dessus Smiley smile .
Merci
Modifié par amaillet (19 Apr 2013 - 00:13)
Please Smiley bawling , je pense que pour certains le problème doit être facile à régler mais pour moi c'est un véritable calvaire.
cela me semble être une usine à gaz pour un simple affichage/masquage
as tu tout simplement essayé un onmouseover (ou autre) sur un css
visibility visible|hidden
Sujet clos
Aller à