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

Résolu
Arcadhias -  
math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

5 réponses

math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   405
 
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>
0
Arcadhias
 
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
0
math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   405
 
c'est pour celà que je t'ai mis la ligne d'exemple tu rajoute style="display:inline" dans les balise li comme dans l'exemple pour les 4
0
Arcadhias
 
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>
0
Arcadhias
 
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
0
math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   405
 
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
0
Arcadhias
 
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 :)
0
Arcadhias
 
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 .. ^^'
0
math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   405
 
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Arcadhias
 
Marche parfaitement bien, je te remercie !
0
math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   405
 
de rien
0