Avec et sans javascript

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 ?
Configuration: Windows XP
Firefox 3.0.14

3 réponses

  1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Pourrait-on voir ?
    1
  2. marholyne
     
    la page est sur un site de mon intranet
    0
  3. marholyne
     
    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;
    });
    0