Sujet Précédent Sujet Suivant

[html] Onglet même page

Résolu/Fermé
coccoweb Messages postés 141 Date d'inscription dimanche 20 décembre 2009 Statut Membre Dernière intervention 17 février 2015 - 7 janv. 2011 à 16:51
coccoweb Messages postés 141 Date d'inscription dimanche 20 décembre 2009 Statut Membre Dernière intervention 17 février 2015 - 7 janv. 2011 à 18:40
Bonjour,
Je recherche un systeme d'onglet afin naviguer sans sortir de la page.

Je dois faire une partie description et fiche technique


| Description | | Fiche Technique|
-----------------------------------------------------------------------------------
- Bla bla description
- Bla bla description
- Bla bla description
-----------------------------------------------------------------------------------

Il faudrait donc que le client passe d'onglet en onglet sans quitter la page


Merci pour votre aide


A voir également:

2 réponses

Réponse 1 / 2
alphon5o
7 janv. 2011 à 17:37
il faut utiliser jquery pour faire ça voici un pti exemple a completer et affiner: 
<!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=iso-8859-1" />
<title>grrrrrrrrrrrrrrrr</title>
<style type="text/css">
*{padding:0; margin: 0;}
body {
	background: #f0f0f0;
	margin: 0;
	padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 360px; margin: 10px auto;}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 20px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 19px;
	line-height: 19px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	padding: 7px 10px;
	font-size: 1.2em;
	text-align: justify;
}

</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>
</head>

<body>

<div class="container">
    <ul class="tabs">
        <li><a href="#tab1">titre 1</a></li>
        <li><a href="#tab2">titre 2</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
               <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper augue gravida enim eleifend nec accumsan nulla commodo. Duis pretium cursus metus nec condimentum. Aliquam erat volutpat. In vel est nibh. Sed a neque leo, quis hendrerit felis. Etiam dictum nisi sed justo malesuada eu porttitor purus ullamcorper. Ut vitae urna sed enim pellentesque volutpat cursus nec tortor. Sed lobortis luctus lectus. Vestibulum eu augue mauris, vitae condimentum enim. Suspendisse et mi purus, id posuere nunc. Ut lacinia elementum augue vitae molestie. Sed quis augue tristique erat cursus hendrerit. Praesent a libero eget mauris tincidunt egestas. 
               </p>
        </div>
        <div id="tab2" class="tab_content">
               <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper augue gravida enim eleifend nec accumsan nulla commodo. Duis pretium cursus metus nec condimentum. Aliquam erat volutpat. In vel est nibh. Sed a neque leo, quis hendrerit felis. Etiam dictum nisi sed justo malesuada eu porttitor purus ullamcorper. Ut vitae urna sed enim pellentesque volutpat cursus nec tortor. Sed lobortis luctus lectus. Vestibulum eu augue mauris, vitae condimentum enim. Suspendisse et mi purus, id posuere nunc. Ut lacinia elementum augue vitae molestie. Sed quis augue tristique erat cursus hendrerit. Praesent a libero eget mauris tincidunt egestas. 
               </p>
        </div>
	</div>
</div>
</body>
</html>
3
coccoweb Messages postés 141 Date d'inscription dimanche 20 décembre 2009 Statut Membre Dernière intervention 17 février 2015 27
7 janv. 2011 à 18:40
Ton exemple me plait, design propres mais peu lourd, l'utilisation de jQuery est une très bonne idée. Merci
0
Réponse 2 / 2
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
7 janv. 2011 à 17:20
Bonjour,

Pour faire ce genre de chose, on utilise du CSS et un peu de javascript.
Le contenu de chaque onglet doit être inscrit dans un bloc (typiquement un <div>) dûment identifié par un id.
Au chargement, l'un des deux est masqué (attribut CSS display:none;), l'autre est affiché normalement (display:block;)

Ensuite, tes "onglets" doivent avoir un attribut html onclick, qui leur permettra de lancer une routine javascript. Celle-ci fera basculer les attribut display de tes deux <div>

Cela peut donner quelque chose comme ça : 
<html>
  <head>
    <script type="text/javascript">
      var nombreOnglets = 2;
      function changeOnglet(numero)
      {
        // On commence par tout masquer
        for (var i = 0; i < nombreOnglets; i++)
          document.getElementById("contenuOnglet" + i).style.display = "none";

        // Puis on affiche celui qui a été sélectionné
        document.getElementById("contenuOnglet" + numero).style.display = "block";
      }
    </script>
  </head>
  <body>
    <div>
      <span onclick="changeOnglet(0)">Description</span>
      <span onclick="changeOnglet(1)">Fiche technique</span>
    </div>
    <div id="contenuOnglet0" style="display:block;">
      - Bla bla description<br />
      - Bla bla description<br />
      - Bla bla description 
    </div>
    <div id="contenuOnglet1" style="display:none;">
      - Bla bla fiche technique<br />
      - Bla bla fiche technique<br />
      - Bla bla fiche technique
    </div>
  </body>
</html>

Voilà.
Bon, je viens d'écrire tout ça « à la volée » sans aucun test, donc il y aura vraisemblablement des ajustements à faire, et je te laisse t'occuper des aspects graphiques.

Bonne chance,

Xavier
1
coccoweb Messages postés 141 Date d'inscription dimanche 20 décembre 2009 Statut Membre Dernière intervention 17 février 2015 27
7 janv. 2011 à 18:40
Simple et concis, je prend ton modèles que j'adapterai, plus simple. J'apprendrai surement plus. Merci
0

Discussions similaires

Onglet disposition Excel ne s'affiche pas
dsqalli -
Raymond PENTIER -

5 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses