11548 sujets

JavaScript, DOM et API Web HTML5

Mouseout jquery non interprété

bonjour à tous

j ai un problème avec un menu basic en jquery

voila mon problème

je souhaiterais que quand on quitte le menu

la div contenant du html disparaissent

j'ai essayé avec mouseout , sans résultat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
    
    <script src="jquery.js"></script>
    <script>
	
	  
	  $(document).ready(function(){		
	
		$("a.tab").mouseover(function () {			
			
			
			$(".active").removeClass("active");
			
			
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).show();

		  
		});
	
	  });
  </script>
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
    	
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Topics</a></li>
            <li><a href="#" title="content_2" class="tab">Archives</a></li>
            <li><a href="#" title="content_3" class="tab">Pages</a></li>

        </ul>
        
        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>
            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>

            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_2" class="content">

        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>
            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>

            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>

            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>
            	<li><a href="">Contact</a></li>
			</ul>
        </div>
    
    </div>

</div>


</body>
</html>


version de jquery=1.4 bien sur Smiley biggrin

le code est simple à comprendre

quand je survole un lien

je cache toutes les div qui ont la classe content.

puis je fais apparaitre la div dont l'id fait référence à l attribut title du lien survolé

merci pour votre aide

je mets un lien en ligne pour que vous jugiez par vous même

merci de votre aide

http://ledricholivier.com/menu_test/ 

    <script>
	
	  
	  $(document).ready(function(){		
	
		$("a.tab").hover(
		function () {			
			
			$(".active").removeClass("active");
			
			
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).show();

		  
		});
	
	  });
  </script>


je ne vois pas de difference
j'ai essayé méthodiquement mais sans résultat

    <script type="test/javascript">	
	
	$(document).ready(function(){		
		
		$("a.tab").hover(
		function () {			
			
			$(".active").removeClass("active");		
			
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).show();
			
		});
		
		$(".content").mouseout(
		function () {	
			$(".content").hide();
		});
	});
  </script>
au secours

même ca ne fonctionne pas

je commente





	  $(document).ready(function(){		
	
		$("a.tab").hover(
		function () {			
			
			
			$(".active").removeClass("active");
			
			
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).show();

		  
		},
//quand on quitte le lien du menu
		function () {
		
			var content_show = $(this).attr("title");
//si on quitte en plus l'element de survol
			$("#"+content_show).mouseout(function(){	
			$("#"+content_show).hide();
			 });
			
		}
		);
	  });
  </script>
j ai trouvé merci Smiley lol 


    <script>
	  
	  $(document).ready(function(){		
	
		$("a.tab").mouseover(function () {		
			
			$(".active").removeClass("active");		
			
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).show();

		  
		});
		$(".tabbed_area").bind("mouseleave",function(){
		$(".content").hide();
		});
	
	  });
  </script>

$(".tabbed_area").bind("mouseleave",function(){
Modifié par phpCbien (01 Jun 2010 - 13:52)
Bonjour,

Déjà, je pense que tu pourrais remplacer ceci:
$("#"+content_show).mouseout(function(){	
	$("#"+content_show).hide();
});
par:
$("#"+content_show).mouseout(function(){	
	$(this).hide();
});


Ensuite, pourquoi ne pas ajouter ce gestionnaire d'évènement dès le départ à tous les éléments qui doivent être masqués lorsqu'ils ne sont plus survolés?

Il me semble que rajouter un gestionnaire d'évènement sur un élément A (via la méthode jQuery.mouseout) au moment ou le pointeur quitte un élément B, ce n'est pas terrible, surtout si les deux sont situés à côté.

Et enfin, à mon humble avis les onglets c'est mieux au clic qu'au survol. Smiley smile
Sujet clos
Aller à