18041 sujets

Questions générales et questions de débutants

[Résolu] Tableau préchargé javascript

Bonjour à tous,

Après quelques semaines sans toucher à javascript et déjà je suis perdu...

j'aurai besoin de créé un tableau a plusieurs onglet pour une fiche produit de site e-commerce, avec des onglets description du produit, caractéristique etc... Je voudrai les charger en HTML et les afficher/cacher avec du javascript.
Rien de compliqué... Et pourtant j'ai des problème de permission refusée sous I.E

déjà à la base je suis pas sur que mon code sois juste, mais dans les grande ligne je cherche un truc du style :

<ul>
	<li id="description" class="current" onClick="affCache('description');">Description</li>
	<li id="technique" class="pas-current" onClick="affCache('technique');">Technique</li>
	<li id="produits" class="pas-current" onClick="affCache('produits');">Produits Liés</li>
	<li id="avis" class="pas-current" onClick="affCache('avis');">Avis</li>
	<li id="livraison" class="pas-current" onClick="affCache('livraison');">Livraison</li>
	</ul>


function affCache(id) {

	var id = document.getElementById(id);
	var li = document.getElementsByTagName("li");

	for (var i = 0; i<6; i++) 
	{

		li.className = "pas-current";
		
		if (li.className == id) 
		{
			li.className = "current";
		}	

	}
}


Ca c'est déjà pour garder le focus sur le menu selectionner, après il me suffirai de faire un style.display = "none" / "inline" pour afficher ou cacher les divs conteneur...

J'ai déjà effectuer des recherche sur Google, rien de bon pour l'instant mais je continu mes recherche.

D'avance merci
Modifié par Loucas (10 Sep 2010 - 15:10)
Bonjour,

a écrit :
... des onglets description du produit, caractéristique etc... Je voudrai les charger en HTML et les afficher/cacher ...

Dans ta description on dirait que tu souhaite masquer les onglets mais je pencherais plutôt pour ce soit le contenu respectif de chaque onglet que tu souhaite afficher/masquer donc si j'ai vu juste ceci devrait t'aider:


<html>
<head>
	<!-- affiche le contenu du premier onglet et cache les autres -->
	<style type="text/css">
		#onglet1{display: block;}
		#onglet2, #onglet3, #onglet4, #onglet5{display: none;}
	</style>
	<script type="text/javascript">
	function affCache(id)
	{
		for(var i=1;i<=5;i++)
		{
			document.getElementById('onglet'+i).style.display='none';
		}
		//afficher les onglets quand on clique sur un lien du menu
		if(document.getElementById(id).style.display =='none')
		{
			document.getElementById(id).style.display = 'block';
		} 
	}
	</script>
</head>
<body>

	<div class="titreOnglet">
		<a href="#" onclick="affCache('onglet1');"> description </a> |
		<a href="#" onclick="affCache('onglet2');"> technique </a> |
		<a href="#" onclick="affCache('onglet3');"> produits </a> |
		<a href="#" onclick="affCache('onglet4');"> avis </a> |
		<a href="#" onclick="affCache('onglet5');"> livraison </a> 
	</div>

	<div id="onglet1">description<br />du texte</div>
	<div id="onglet2">technique<br />blabla</div>
	<div id="onglet3">produits<br />blablabla</div>
	<div id="onglet4">avis<br />blablablabla</div>
	<div id="onglet5">livraison<br />blablablabla...</div>

</body>
</html>
Oui c'est tout à fait ca, ton code est plus propre que le miens et je t'en remercie.

mais du coup je cherche également une gestion pour par exemple faire en sorte que lorsqu'on a cliquer sur "description", on affiche la description et on change le background de l'onglet, un peu comme un menu dynamique avec une classe "current".

Un peu comme dans l'image que je post avec. Et du coup j'arrive pas a selectionner l'id cliqué pour changer sa class.

upload/19373-2010-09-10.jpg
Modifié par Loucas (10 Sep 2010 - 12:03)
Salut,

@Omanu > ta solution utilise le JavaScript de manière obstrusive : si le JS est désactivé on ne voit que le contenu du premier DIV. Il vaudrait mieux faire :
<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
    <div class="titreOnglet"> 
        <a href="#" onclick="affCache('onglet1');"> description </a> | 
        <a href="#" onclick="affCache('onglet2');"> technique </a> | 
        <a href="#" onclick="affCache('onglet3');"> produits </a> | 
        <a href="#" onclick="affCache('onglet4');"> avis </a> | 
        <a href="#" onclick="affCache('onglet5');"> livraison </a>  
    </div> 
 
    <div id="onglet1">description<br />du texte</div> 
    <div id="onglet2">technique<br />blabla</div> 
    <div id="onglet3">produits<br />blablabla</div> 
    <div id="onglet4">avis<br />blablablabla</div> 
    <div id="onglet5">livraison<br />blablablabla...</div> 
    <script type="text/javascript"> 
    function affCache(id) 
    { 
        for(var i=1;i<=5;i++) 
        { 
            document.getElementById('onglet'+i).style.display='none'; 
        } 
        //afficher les onglets quand on clique sur un lien du menu 
        if(document.getElementById(id).style.display =='none') 
        { 
            document.getElementById(id).style.display = 'block'; 
        }  
    } 
	 affCache('onglet1');
    </script> 
</body>
</html>
@Heyoan > Merci pour cette précision importante et qui en plus évite la déclaration du css.

On en apprend tous les jours

@Loucas > ce n'est qu'un exemple et on peu sans doute faire mieux

<!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="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
</head> 
<body> 
    <div class="titreOnglet">  
        <a href="#" id="o1" onclick="affCache('onglet1', 'o1');"> description </a> |  
        <a href="#" id="o2" onclick="affCache('onglet2', 'o2');"> technique </a> |  
        <a href="#" id="o3" onclick="affCache('onglet3', 'o3');"> produits </a> |  
        <a href="#" id="o4" onclick="affCache('onglet4', 'o4');"> avis </a> |  
        <a href="#" id="o5" onclick="affCache('onglet5', 'o5');"> livraison </a>   
    </div>  
  
    <div id="onglet1">description<br />du texte</div>  
    <div id="onglet2">technique<br />blabla</div>  
    <div id="onglet3">produits<br />blablabla</div>  
    <div id="onglet4">avis<br />blablablabla</div>  
    <div id="onglet5">livraison<br />blablablabla...</div>  
    <script type="text/javascript">  
    function affCache(id, id2)  
    {  
        for(var i=1;i<=5;i++)  
        {  
            document.getElementById('onglet'+i).style.display='none'; 
			document.getElementById('o'+i).style.background='silver';
        }  
        //afficher les onglets quand on clique sur un lien du menu  
        if(document.getElementById(id).style.display =='none')  
        {  
            document.getElementById(id).style.display = 'block';  
			document.getElementById(id2).style.background='lightgreen';
        }   
    }  
     affCache('onglet1', 'o1'); 
    </script>  
</body> 
</html>

Modifié par Omanu (10 Sep 2010 - 12:27)
Un pitit exemple pour jeter un œil à jQuery :

<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#titreOnglet a {
	text-decoration: none;
	border: 1px solid #000;
	padding: 4px 10px;
	margin-right: 5px;
	display: inline-block;
	position: relative;
	bottom: -1px;
	z-index: 2;
	outline: none;
}
#titreOnglet a:hover,
#titreOnglet a:focus,
#titreOnglet a:active,
#titreOnglet a.en_cours {
	background: gold;
	border-bottom: 1px solid gold;
}
#content {
	background: gold;
	border: 1px solid #000;
	padding: 10px;
}

</style>
</head>
<body>
<div id="titreOnglet"> 
	<a href="#" title="description" class="en_cours">description</a> 
	<a href="#" title="technique">technique</a> 
	<a href="#" title="produits">produits</a> 
	<a href="#" title="avis">avis</a> 
	<a href="#" title="livraison">livraison</a> 
</div> 
<div id="content">
	<div id="description"><h1>Description</h1><p>Lorem ipsum</p></div>
	<div id="technique"><h1>Technique</h1><p>Lorem ipsum</p></div>
	<div id="produits"><h1>Produits</h1><p>Lorem ipsum</p></div>
	<div id="avis"><h1>Avis</h1><p>Lorem ipsum</p></div>
	<div id="livraison"><h1>Livraison</h1><p>Lorem ipsum</p></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$("#titreOnglet a").click( function() {
		$("#titreOnglet a").removeClass('en_cours')
		$(this).addClass('en_cours')
		affCache( $(this).attr("title") );
	});
	function affCache(id) {
		$("#content div").hide();
		$("#content div#"+id).show();
	} 
	affCache('description');
</script> 
</body>
</html>

Modifié par Heyoan (10 Sep 2010 - 13:10)
Eh bien j'en ai de la chance aujourd'hui, je vous remercie tout les deux pour votre participation.

Je pense garder la solution de Heyoan,
néanmoins je me pose la question de savoir si l'appel de jquery dans une fiche client ne ralentirai pas le chargement de la page. Ces pages là sont plutôt stratégique car je les couplent avec une campagne adwords qui fonde le niveau de qualité d'une page sur plusieurs critères, dont celui de la vitesse de chargement.

Mais bon ma flemme ne va pas chipoter sur quelques millisecondes Smiley lol
Loucas a écrit :
néanmoins je me pose la question de savoir si l'appel de jquery dans une fiche client ne ralentirai pas le chargement de la page.
Je donnais mon (humble) avis à ce sujet dans ce post.
Au passage j'ai encore effectué une petite modification :

Plutôt que d'utiliser des balise <a>, qui dès que l'ont clique dessus remonte en haut de page, j'ai mis a la place des <span>, pour éviter que lors du clic sur un onglet l'utilisateur vois toute sa page remonter en top.

Du coup me reste l'intégration, Sujet clos encore merci tous le monde

A bientot
Loucas a écrit :
Plutôt que d'utiliser des balise <a>, qui dès que l'ont clique dessus remonte en haut de page
On peut bloquer cela en utilisant return false; mais en l'occurrence ce serait pas mal de garder le lien vers les ancres en cas de JS désactivé :
<!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="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<style type="text/css"> 
#titreOnglet a { 
    text-decoration: none; 
    border: 1px solid #000; 
    padding: 4px 10px; 
    margin-right: 5px; 
    display: inline-block; 
    position: relative; 
    bottom: -1px; 
    z-index: 2; 
    outline: none; 
} 
#titreOnglet a:hover, 
#titreOnglet a:focus, 
#titreOnglet a:active, 
#titreOnglet a.en_cours { 
    background: gold; 
    border-bottom: 1px solid gold; 
} 
#content { 
    background: gold; 
    border: 1px solid #000; 
    padding: 10px; 
} 
 
</style> 
</head> 
<body> 
<div id="titreOnglet">  
    <a href="#description" class="en_cours">description</a>  
    <a href="#technique">technique</a>  
    <a href="#produits">produits</a>  
    <a href="#avis">avis</a>  
    <a href="#livraison">livraison</a>  
</div>  
<div id="content"> 
    <div id="description"><h1>Description</h1><p>Lorem ipsum</p></div> 
    <div id="technique"><h1>Technique</h1><p>Lorem ipsum</p></div> 
    <div id="produits"><h1>Produits</h1><p>Lorem ipsum</p></div> 
    <div id="avis"><h1>Avis</h1><p>Lorem ipsum</p></div> 
    <div id="livraison"><h1>Livraison</h1><p>Lorem ipsum</p></div> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("#titreOnglet a").click( function() { 
        $("#titreOnglet a").removeClass('en_cours') 
        $(this).addClass('en_cours') 
        affCache( $(this).attr('href').replace('#', '') );
    }); 
    function affCache(id) { 
        $("#content div").hide(); 
        $("#content div#"+id).show(); 
    }  
    affCache('description'); 
</script>  
</body> 
</html>
Sujet clos
Aller à