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

Résolu/Fermé
Arcadhias - 4 avril 2014 à 18:52
math 2000 Messages postés 2605 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 - 6 avril 2014 à 17:10
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 dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
Modifié par math 2000 le 4/04/2014 à 19:02
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
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 dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
4 avril 2014 à 19:29
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
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
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 dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
4 avril 2014 à 20:27
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
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
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 dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
Modifié par math 2000 le 6/04/2014 à 16:18
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
Marche parfaitement bien, je te remercie !
0
math 2000 Messages postés 2605 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
6 avril 2014 à 17:10
de rien
0