Avec et sans javascript
marholyne
-
marholyne -
marholyne -
Bonjour,
J'ai à faire une page qui doit s'afficher avec et sans javascript.
* avec javascript je dois gérer des onglets et un toggle ( ouverture/fermeture de blocs)
* sans javascript je dois afficher d'emblée tout le contenu de ma page
j'ai fait :
1 - codage de la page comme si je n'avais pas de javascript : les infos de mes onglets sont représentés par une liste UL et les blocs togglés sont affichés tel quels
2- rajout de js jquery (gestion des styles) pour les onglets (ui-tabs) et le toggling (togglecontent)
cela fonctionne sauf que, en mode "avec javascript", j'obtiens un bref affichage de ma liste ul puis le ui-tabs prend le relai et affiche les onglets . ma page est correcte sauf cet affichage bref et intempestif de la liste UL
avez-vous une idée de solution ?
J'ai à faire une page qui doit s'afficher avec et sans javascript.
* avec javascript je dois gérer des onglets et un toggle ( ouverture/fermeture de blocs)
* sans javascript je dois afficher d'emblée tout le contenu de ma page
j'ai fait :
1 - codage de la page comme si je n'avais pas de javascript : les infos de mes onglets sont représentés par une liste UL et les blocs togglés sont affichés tel quels
2- rajout de js jquery (gestion des styles) pour les onglets (ui-tabs) et le toggling (togglecontent)
cela fonctionne sauf que, en mode "avec javascript", j'obtiens un bref affichage de ma liste ul puis le ui-tabs prend le relai et affiche les onglets . ma page est correcte sauf cet affichage bref et intempestif de la liste UL
avez-vous une idée de solution ?
A voir également:
- Avec et sans javascript
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Erreur #125 javascript - Forum Mozilla Firefox
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
3 réponses
le code :
* je déclare une liste ul avec un style
* je supprime le style par javascript
pourquoi ?
pour que la page présente la liste avec ou sans javascript : sans ce sera une liste avec certains styles ( classe "sansjs") , avec ce sera des onglets (jquery ui.tabs )
chronologie :
la page s'affiche avec la liste ul
puis
jquery supprime les styles de la liste et transforme la liste en onglets ;
le temps que le jquery fasse son effet on voit un court instant apparaître la liste ul avec ses styles du début
la page :
<script type="text/javascript" src="script.js"></script> // script jquery qui enlève la classe "sansjs" et qui génère les onglets
<div id="ddsiswf">
<ul> ma liste
<li class="sansjs"><a class="lien_onglet" href="#onglet_1">f1</a></li>
<li class="sansjs"><a class="lien_onglet" href="#onglet_2">f2</a></li>
</ul>
<div id="onglet_1">sdfsdfsd</div>
<div id="onglet_2">sdfsdfsd</div>
</div>
le script :
$(document).ready(function() {
$("#ddsiswf > ul").tabs();
$("ul.ui-tabs-nav li").removeClass("sansjs");
$("li.ui-tabs-selected").removeClass("sansjs");
...
return false;
});
* je déclare une liste ul avec un style
* je supprime le style par javascript
pourquoi ?
pour que la page présente la liste avec ou sans javascript : sans ce sera une liste avec certains styles ( classe "sansjs") , avec ce sera des onglets (jquery ui.tabs )
chronologie :
la page s'affiche avec la liste ul
puis
jquery supprime les styles de la liste et transforme la liste en onglets ;
le temps que le jquery fasse son effet on voit un court instant apparaître la liste ul avec ses styles du début
la page :
<script type="text/javascript" src="script.js"></script> // script jquery qui enlève la classe "sansjs" et qui génère les onglets
<div id="ddsiswf">
<ul> ma liste
<li class="sansjs"><a class="lien_onglet" href="#onglet_1">f1</a></li>
<li class="sansjs"><a class="lien_onglet" href="#onglet_2">f2</a></li>
</ul>
<div id="onglet_1">sdfsdfsd</div>
<div id="onglet_2">sdfsdfsd</div>
</div>
le script :
$(document).ready(function() {
$("#ddsiswf > ul").tabs();
$("ul.ui-tabs-nav li").removeClass("sansjs");
$("li.ui-tabs-selected").removeClass("sansjs");
...
return false;
});
