Onglets dans HTML par Java ; codage bon, mais ...

[Résolu/Fermé]
Signaler
-
Messages postés
2579
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
-
Bonjour,

Alors, je n'y connais pas grand chose et je pense que le codage que je vais afficher a bien une base Java .. J'ai parcouru plusieurs sites et tutos pour essayer de galér.... bricoler, quelque chose qui me permettrait d'afficher des onglets sur une page PHP.
Voici donc le code que j'ai obtenus ;

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

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(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>
</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab1"><input type="button" value="Titre 1" /></a></li>
<li><a href="#tab2"><input type="button" value="Titre 2" /></a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>TEXTE 1</p>
</div>
<div id="tab2" class="tab_content">
<p>TEXTE 2</p>
</div>
</div>
</div>

Le résultat est pile celui escomptés. Lorsque j'appuis sur le bouton Titre 2, le contenu de "TEXTE 2" s'affiche et "TEXTE 1" disparaît, donc il est parfaitement fonctionnel.

MAIS, je souhaite mettre les boutons côte à côte sur une même ligne et non les uns en dessous des autres à l'aide d'une puce comme c'est actuellement.
Sauf que si j'enlève les balises <li></li>, ça ne fonctionne plus et ça me fait un joyeux foutoir ..

Bref, comment à partir de ce code, puis-je afficher les boutons sur une même ligne ?

En vous remerciant par avance ! :D

5 réponses

Messages postés
2579
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
395
passe par du css et utilise la propriété

display:inline;


vu que tu en a que 2 dans les deux met
<li style="display:inline">blbla </li>
Euh vouais ..

Je te remercie pour ta réponse mais, étant donné que je n'y connais pas grand chose pour ne pas dire rien et que j'ai du mettre trois bonnes heures pour obtenir ça, je ne sais pas du tout ce que je dois faire en passant par du css .. ^^'

D'autant plus que je souhaite au final qu'il y ai au moins 4 onglets
Ah oui, merci !
Alors, ça marche, mais uniquement dans le "module de prévisualisation" (c'est un site Jimdo au cas où).
Mais lorsque je sauvegarde, Le premier bouton a toujours sa puce, le second non mais il se retrouve en dessous du premier .. J'ai pourtant bien fais comme vous me l'aviez dis ;

<div class="container">
<ul class="tabs">
<li style="display: inline;"><a href="#tab1"><input type="button" value="Titre 1" /></a></li>
<li style="display: inline;"><a href="#tab2"><input type="button" value="Titre 2" /></a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>TEXTE 1</p>
</div>
<div id="tab2" class="tab_content">
<p>TEXTE 2</p>
</div>
</div>
</div>
Pour illustrer, sur la console avant enregistrement j'ai bien ceci ;
http://hpics.li/e889aba
Mais après sauvegarde, dans les faits j'obtiens cela ;
http://hpics.li/5393531
Messages postés
2579
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
395
ha oui et d'ailleurs il y a même le rond noir qui rapparait il doit y avoir des conflit avec le css du site vu que ce n'est pas le tient .je crains de ne pouvoir résoudre ça .
test quand même inline-block au lieu de inline et pourquoi pas de rajouter la même chose dans les balise ul
Alors, comme ça

<ul class="tabs: inline;">
<li style="display: inline;"><a href="#tab1"><input type="button" value="Titre 1" /></a></li>
<li style="display: inline;"><a href="#tab2"><input type="button" value="Titre 2" /></a></li>
</ul>

On a bien les boutons sur la même ligne, mais si je clique sur Titre 2, le Texte 2 ne s'affiche pas à la place de Texte 1 ..
D'autres idées ? Si non, merci pour ton aide :)
Il y a peut-être quelque chose à changer dans le bloc d'avant avec le rajout du "inline" sur la balise ul ? Vu que ça ne marche plus j'imagine que ça vient de là mais je n'ai aucune idée de ce qu'il faudrait changer ..
Personne ? :/
Ou alors si quelqu'un connaît le codage pour obtenir des onglets différemment qu'avec ce que j'ai, je suis preneur également .. ^^'
Messages postés
2579
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
395
j'ai refais un code vite fait avec du js parce que le jquerry que tu utilises je n'y comprend rien .
si tu rajoutes des menus et que tu en as 4 remplace le 1 de la boucle for par 3 j'ai pas trop envie de créer un compteur de menu.


<script type="text/javascript">// 
function afficherMonTexte(bouton)
{
//récupère l'id et extrait le numéro
maChaine=bouton.id;
indice=maChaine.substring(1,2);
//masqué tout les texte sauf 1
for(var i=0;i<=1;i++)
{
document.getElementById("tab"+i).style.display="none";
}
document.getElementById("tab"+indice).style.display="inline";
}

</script>

<div>
<input type="button" id="b0" value="Titre 1" onclick="afficherMonTexte(this)"/>
<input type="button" id="b1" value="Titre 2" onclick="afficherMonTexte(this)" /></a>
<div >
<div id="tab0" class="tab_content">
<p>TEXTE 1</p>
</div>
<div id="tab1" class="tab_content">
<p>TEXTE 2</p>
</div>


</div>
</div>

les id doivent être bsuivit de l'indice de bouton ça commence à 0 de même les div doivent être avec tab suivit de l'indice
Marche parfaitement bien, je te remercie !
Messages postés
2579
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
395
de rien