Par défaut :la cible avec le CSS

J'ai ce CSS:

<style type="text/css">
.tab {
  display: none;
}
.tab:target {
  display: block;
}
</style>

Et ce HTML:

<div class="tab_container">

  <ul class="tabs">
    <li><a href="#updates-list">List</a></li>
    <li><a href="#updates-map">Map</a></li>
  </ul>

  <ul class="tab list" id="updates-list">
    Eh.. Hello!
  </ul>
  <div class="tab map" id="updates-map"></div>
</div>

Cependant, ma page est vide si aucune cible n' (# dans l'URL) est spécifié et pas d'onglet est cliqué encore. Je veux montrer ul#updates-list par défaut.

Comment puis-je faire cela? Merci.

Mise à jour: à Côté de cela, ma Carte de Google est cassé, si ce n'est pas l'objectif initial. Quelqu'un sait-il un correctif?

À partir de la CSS3 spec: "Si le document est URI n'a pas d'identificateur de fragment, le document n'a pas d'élément cible." Boo!
Pourquoi boo? Qu'attendez-vous :target de match, alors si il n'y a pas d'identificateur de fragment? L'élément racine? Tous les éléments (ou tous les [id], a[name])? Ou de la défaillance d'un sous-groupe de [id], a[name] dans le document que l'auteur s'attend à basant sur leurs propres intentions jamais être référencé par un identificateur de fragment, quelque chose que ni CSS ni même dans les DOM puisse avoir la moindre connaissance de l'?

OriginalL'auteur | 2010-07-28

  1. 20

    Spontanément, je dirais que la seule solution, je pense, malheureusement, à l'aide de JavaScript. Quelque chose comme:

    <script type="text/javascript">
  if (document.location.hash == "" || document.location.hash == "#")
    document.location.hash = "#updates-list";
</script>

    EDIT:

    Ok, obtenu un CSS solution. Cela nécessite toutefois l'entrée par défaut #updates-list à être placé en dernier (après #updates-map et les autres onglets vous pouvez ajouter):

    .tab, .tab:target ~ #updates-list  {
  display: none;
}
#updates-list, .tab:target {
  display: block;
}
    merci beaucoup! mais pouvez-vous nous expliquer un peu plus sur la façon dont votre css solution sélectionne une cible par défaut? qu'est-ce que .onglet? il n'a pas utilisé .onglet? devrait être .les onglets? ou
    #updates-list est la valeur par défaut, parce que c'est ce que je suis en précisant dans le règle #updates-list, .tab:target { ... }. .tab est la classe sur le contenu des onglets de ne pas les onglets eux-mêmes - comparer mon CSS le CSS dans la question.
    ok, donc la deuxième ligne indique l'affichage par défaut de la classe dans le même style que :la cible? et la première ligne indique le style de la classe par défaut le même que de ne pas la cible si la cible est un frère ou une sœur? mais l'habitude de la deuxième ligne, remplacer de toute façon? je suis en train de le faire fonctionner avec cet exemple de css-tricks.com/examples/CSSTabs - jsfiddle.net/ArHdb merci beaucoup
    Eh bien, ma solution ci-dessus est basée sur des onglets qui sont séparées de leur contenu. D'abord les languettes, puis le contenu. Votre code a onglets et des matières mélangées, donc il ne peut pas s'appliquer, et vous aurez besoin d'une solution complètement différente, qui n'ont pas le temps d'y penser en ce moment...
    Cet exemple fonctionne très bien, sauf qu'il n'y est une bug dans iOS 4.3 qui l'a fait ne pas fonctionner correctement.

    OriginalL'auteur RoToRa

  2. 4

    Je sais que c'est une vieille question, mais c'est toujours d'actualité et j'ai une autre suggestion:

    <a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>

<a id="tab1"></a>
<a id="tab2"></a>

<div class="tab tab1 default-tab">Some content</div>
<div class="tab tab2">Some other content</div>

    et le css:

    .tab {display:none}

.default-tab {display:block}

:target ~ .default-tab {display:none}

#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
  display: block
}

    Cela vous permet d'avoir les onglets commandé toutefois vous voulez, mais si vous êtes à la génération du code html de façon dynamique, vous aurez besoin de générer le css dynamiquement. Ou alors, choisir un nombre maximum d'onglets pour un support quand vous écrire le css.

    Enfin!!! C'est la première chose que j'ai trouvé qui fonctionne. Je suis à l'aide de #la maison au lieu de .par défaut onglet, mais tout de même. Incroyable. Je vous remercie. L'autre solution que j'ai trouvé est de l'aide :en dernier lieu, et qui ne fonctionnait pas du tout. Il a encore le problème de l'onglet par défaut est d'être le dernier, mais si vous êtes seulement à l'affichage d'un à la fois, c'est un non-problème. Je vous remercie.

    OriginalL'auteur qcode peter

  3. 2

    Je suppose que ce que vous voulez faire est de sélectionner quelque chose comme .tab_container:not(> :target) > .default pour afficher l'onglet par défaut lorsque personne n'est visé. Cependant, ce n'est pas possible depuis le :not() pseudo-classe ne prend que simple sélecteurs (c'est à dire juste :target, pas > :target, auquel cas vous devez cocher la cible du conteneur, pas les enfants).

    Je voudrais effectuer une des opérations suivantes:

    • L'utilisation de Javascript pour définir la cible pour le premier onglet à charge (ou tout simplement exiger que l'ancre est présent).

    • Ajouter un spécifique remplacer classe pour la première de l'onglet actif et le retirer (avec Javascript) après le premier onglet de l'interrupteur.

    La première alternative plaisante pas avec l'historique du navigateur tandis que le second sera un peu plus d'un code de mess. Je ne peux pas penser à un "parfait" solution maintenant. Peut-être que vous êtes mieux de simplement à l'aide de Javascript pour détecter la cible actuelle pour obtenir la compatibilité avec les non-CSS3 navigateurs et de résoudre ce problème particulier dans un environnement relativement propre chemin?

    La compatibilité n'est pas un problème. Je ne se soucient Webkit.
    Ce être possible dans le futur avec .tab_container:not(:has(> :target)) > .default, mais seulement si :has() avec un enfant combinator fait en CSS. Sinon, vous aurez toujours besoin d'utiliser du JavaScript. (FWIW, l'exemple que j'ai donné fonctionne totalement en jQuery aujourd'hui.)

    OriginalL'auteur kolizz

  4. 2

    Cela semble être la réponse la plus courte que j'ai pu trouver:

    location=location.hash||"#updates-list"

    Ce simplement redirige l'utilisateur vers une de hachage valide si elle est actuellement inexistante ou vide #.

    ~98% des utilisateurs ont JavaScript activé, donc un JS solution ne devrait pas vraiment être un problème.

    OriginalL'auteur nobody

  5. 0

    Utile:

    .tab#tabControl { display:block; }

.tab:not(:target) { display:none; }

.tab:target ~ #tabControl { display:none; }

    OriginalL'auteur Júnior Mendonça