Avec et sans javascript

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. la page est sur un site de mon intranet
    0
    1. 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