ligne de script avec des pointeurs lorsque vous cliquez dessus

J'essaie de comprendre quel est le bon terme pour que je puisse rechercher davantage et apprendre. J'ai rencontré cet onglet, où vous cliquez sur l'un le titre de la ligne bleue et un pointeur pop pointant vers le contenu de l'onglet ... (par exemple lorsque vous cliquez sur Livres, puis cliquez sur Articles, etc etc .. Voici l'exemple ..ligne de script avec des pointeurs lorsque vous cliquez dessus

http://www.sutherlandlibrary.com/tabs/library-tabs-v4.htm

Je veux savoir comment vous pouvez créer cela. Ou ce

Merci à l'avance, est-il? pour que je puisse commencer à rechercher en elle. Je sais que je Je suppose pour rechercher d'abord, mais je ne sais pas par où commencer

Cheers

Source

2013-08-14 AnOldFartLearning

'Je veux savoir comment vous pouvez créer cela. 'Un bon point de départ serait d'examiner le code source de ce site Web ... –

Il est littéralement appelé onglets ... Quel est le problème ici? – jeremy

@Jeremy Je suppose que l'OP veut savoir comment styliser l'indicateur de sélection de flèche vers le bas en utilisant CSS? –

Recherchez les formes CSS3, pour le point pointé réel.

Il existe des plugins dans un framework majeur pour créer des onglets, ou vous pouvez en créer un personnalisé avec du jQuery. Vous aurez besoin .on('click, ...) et .fadeIn/.fadeOut

Pour l'onglet vue utiliser le CSS position: absolute sur chaque onglet contenu dans un récipient avec position: relative.

_{(communauté wiki parce que je ne l'ai pas fait un travail)}

Source

2013-08-14 03:09:36 FakeRainBrigand

Demo: http://jsfiddle.net/trevordixon/hvBpF/

Chaque onglet est un <li>, et l'onglet sélectionné a une classe current. Vous verrez qu'ils ont la règle CSS suivante:

.tab-features .tabs-list .current { 
    background: url("images/feature-tab-arrow.gif") no-repeat center 27px; 
}

Ainsi, l'onglet qui a la classe current a une image de flèche 27px de haut placé juste en dessous du bas de l'onglet. Ils auraient pu aussi faire quelque chose comme ça au lieu d'utiliser une image de fond:

.tab-features .tabs-list .current:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    /* These borders make it a triangle */ 
    border-left: 14px solid transparent; 
    border-top: 14px solid #0088aa; 
    border-right: 14px solid transparent; 
}

Donc, pour mettre en œuvre quelque chose comme cela, trouver un bon script onglets ou plug-in, et le style de l'onglet sélectionné comme ça.

Source

2013-08-14 03:24:52

Salut à tous, merci tas .. Je vais commencer à jouer avec elle ... Vive mille – AnOldFartLearning

Celui de la page que vous avez affichée utilise une image simple enter image description here
pour un élément <li> qui a la classe .current sur clic (jQuery).
Cette image est positionnée avec background-position: center bottom; et recouvre l'horizon. ligne d'azur.

Source

2013-08-14 03:27:18

ligne de script avec des pointeurs lorsque vous cliquez dessus

Répondre

Questions connexes