Meilleur moyen de code HTML/CSS/JS onglet système de navigation (pas d'images)

Je suis le codage d'un système d'onglets pour mon site, qui doit être entièrement en CSS/HTML/JS (sans l'aide de toutes les images). Le problème est, je continue à bidouiller le code jusqu'à ce que, quand je suis fini, c'est juste un gâchis. Je ne sais pas si l'utilisation de positionnement, ou flotter les onglets ou quoi. Essentiellement, un des gros problèmes est que après j'enlève le bas-frontière CSS de l'onglet sélectionné, j'ai besoin de le déplacer en bas de 1px de sorte qu'il s'intègre avec les tri-têtes - je ne sais pas si utiliser margin: -1px ou position: relative/absolue etc. J'aimerais quelques conseils sur la bonne manière de coder un système d'onglets, comme ceci, de sorte qu'il peut être réutilisé sur le site!

Restez à l'écart à partir de négatifs de positionnement/marges/rembourrage à tout prix.
pourquoi, oh pourquoi! J'utilise des marges négatives tout le temps. Peut être très pratique.
Je ne comprends pas votre "désolé, ils sont tellement délavé" commentaire; ne vous laissez l'image assis trop longtemps au soleil?
Wow, après quelques recherches, je suppose qu'ils ne sont pas aussi mauvais que je le pensais. Je me souviens juste lors de l'apprentissage css comment tout le monde allait dire à les éviter. Il s'avère qu'ils sont désormais plus acceptés. Aller à la figure.
la conception originale que nous avons faite était vraiment vraiment disparu et difficile à voir - nous avons remanié de sorte qu'il était plus facile sur les yeux, mais je viens de mettre un peu d'excuses dans le cas où les gens ont une difficulté à voir les contours.

OriginalL'auteur Walker | 2010-07-14

Voici un exemple avec une CSS qui le fait fonctionner:

HTML:

<body>
    <div class="tabs">
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li class="active"><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
        <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
        </div>
    </div>
</body>

CSS:

.tabs ul {
    list-style: none;
}

.tabs ul li {
    float: left;
    background: #eee;
    border: 1px #aaa solid;
    border-bottom: none;
    margin-right: 10px;
    padding: 5px;
}

.tabs ul li.active {
    margin-bottom: -1px;
    padding-bottom: 6px;
}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;

}

Il fonctionne même sans JS (à un certain degré). Vous aurez encore besoin d'un peu de JS pour déplacer le "actif" de la classe arround et aussi si vous voulez vous avez envie de transitions.

Le voir en action ici: http://jsfiddle.net/V8CK4/

Merci, a très bien fonctionné! Je vais vous montrer ce que j'ai quand je m'engage.
Bon à savoir, je pourrais vous aider!

OriginalL'auteur thomasfedb

2

Je voudrais utiliser des divs imbriqués à l'intérieur d'une liste.
```
<ul>
<li>Tab1
    <div> Content for Tab1</div>  
</li>
<li>Tab2
    <div> Content for Tab2</div>  
</li>
<li>Tab3
    <div> Content for Tab3</div>  
</li>
</ul>
```
Ensuite de style css ul li div de ne pas montrer. Je voudrais utiliser jQuery pour afficher l'enfant divs sur clic de la mère de li.

EDIT: Merci pour le commentaire... à Noter que la batterie au lithium doivent être de style en ligne, de sorte qu'ils ne se cassent pas la ligne après chaque. Également définir la li list-style none.

J'aime bien cette solution, et je l'ai utilisé moi-même. Mais vous devriez noter qu'il nécessite display: inline.
Persoanlly je crois qu'il peut obtenir un peu désordonné arriver à l'intérieur de la balise div en position. Aussi ce sera probablement se dégrader dans la non-JS les navigateurs pas tout à fait ainsi que la solution que je décris ci-dessous.
Ouais thomas votre solution se dégrade mieux.

OriginalL'auteur Capt Otis
1

À mon avis, je voudrais écrire comme ceci:
```
<div class="tabContainer">
    <ul class="tabList">
        <li><a href="#item1">Item 1</a></li>
        <li><a href="#item2">Item 2</a></li>
        <li><a href="#item3">Item 3</a></li>
    </ul>

    <em class="tabMessage">This is the message on the right.</em>

    <div class="tabInnerContainer">
        <div id="item1">
            bla
        </div>
        <div id="item2">
            bla
        </div>
        <div id="item3">
            bla
        </div>
    </div>
</div>
```
De cette façon, vous permettra de rendre la fonction al moins dans une certaine mesure, sans Javascipt, dégradant bien dans les navigateurs avec JS désactivé. Certaines des classes pourrait être supprimée si l'aide de CSS3 sleectors.

J'ai également vous recommandons d'utiliser jQuery ou autres termes similaires si vous pouvez pour le js.
Merci pour le commentaire, comment vous déplacez l'onglet sélectionné vers le bas de sorte qu'il se chevauchaient 1px avec le fond de la InnerContainer de sorte qu'ils mélangé à ressembler à une pièce? Le positionnement absolu, de marges négatives?
Je donnerais que li négatif -1px la marge du bas, ou une marge supérieure de 1px. Et je garderais tout ce qui est relatif.

OriginalL'auteur thomasfedb
1

Je suppose que le problème est de faire de l'onglet et la barre ci-dessous, il semble comme une seule pièce sans utiliser trop de code.

Ce que j'ai fait avant est de faire les deux éléments que je veux rejoindre se chevauchent légèrement (ou pas du tout) et puis mettre un troisième élément (dans la même couleur que les deux autres éléments), où le chevauchement est. Cela agit comme une sorte de patch.

Comme ceci:

I. sans patch
```
     _________________ 
    |                 |
    |    tab          |
  __|_________________|________________________________
 |                                                     |
 |       menu bar                                      |
 |_____________________________________________________|
```
II. avec le patch
```
     _________________ 
    |    tab          |
    |- - - - - - - - -|
 ___|    patch        |_______________________________
|    - - - - - - - - -                                |
|        menu bar                                     |
|_____________________________________________________|
```
Vous aurez seulement besoin d'utiliser z-indexes pour faire ce travail correctement. Le patch peut s'étendre sur l'onglet div il est contenu en utilisant position: absolute et suffisamment grande valeur pour top.

Mise à jour: démonstration

http://jsfiddle.net/7GJaW/

Cela semble trop désordonné et non sémantique, si elle peut être réalisée sans l'excès d'éléments, pourquoi pas vous?
Pour l'un, votre exemple ne couvre pas les bords arrondis. Ma solution adresses de ce bien. Aussi il n'est ni désordre, ni pour la non-sémantique (ce que ça veut dire de toute façon?). J'ai posté un lien vers une démo sur le jsfiddle.net

OriginalL'auteur FK82
0

Comme @Otis mentionné, la nidification est une très bonne technique. J'ai l'habitude de nid ul

Link 1 Link 1 Item 1 Link 1 Item 2

Toutefois, si vous n'êtes pas essayer de tenter de faire une liste déroulante...

C'est exactement ce que j'utilise, à l'exception d'un div fonctionnerait mieux dans cet exemple. En Plus, il est facile de manipuler les éléments imbriqués à l'aide de javascript/jquery.

OriginalL'auteur Louis Stephens

Vous devez vous connecter pour publier un commentaire.