Lorsque vous cliquez sur l'onglet A, affichez le contenu de l'onglet A. Cliquez sur l'onglet B, affichez le contenu de l'onglet B, et ainsi de suite.Comment faire une vue à onglets en HTML?
Quelle est la manière la plus simple et la plus compatible de construire un extrait de code HTML?
Je ne veux pas utiliser de bibliothèques ici, donc aucune de jQuery ou d'autres bibliothèques.
Si vous voulez rouler votre propre que vous pourriez faire quelque chose comme, contrôle onglet ceci:
<html>
<head>
<script type="text/javascript">
function activateTab(pageId) {
var tabCtrl = document.getElementById('tabCtrl');
var pageToActivate = document.getElementById(pageId);
for (var i = 0; i < tabCtrl.childNodes.length; i++) {
var node = tabCtrl.childNodes[i];
if (node.nodeType == 1) { /* Element */
node.style.display = (node == pageToActivate) ? 'block' : 'none';
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="javascript:activateTab('page1')">Tab 1</a>
</li>
<li>
<a href="javascript:activateTab('page2')">Tab 2</a>
</li>
...
</ul>
<div id="tabCtrl">
<div id="page1" style="display: block;">Page 1</div>
<div id="page2" style="display: none;">Page 2</div>
...
</div>
</body>
</html>
Le widget onglets de jQuery UI est facile à utiliser: http://jqueryui.com/demos/tabs/. Le widget des onglets jQuery fonctionne entièrement du côté du navigateur - le contenu de tous les onglets est envoyé à chaque requête, ou vous pouvez écrire du code JavaScript utilisant Ajax pour charger dynamiquement le contenu de l'onglet.
Mais cela pourrait ne pas convenir à votre utilisation. Considérez si vous devez contrôler les onglets côté serveur (c'est-à-dire qu'un clic sur un onglet envoie une nouvelle demande de page au serveur - le serveur construit du code HTML qui a l'aspect visuel des onglets).
je dois la mettre en œuvre sans libs :( – omg
Si vous êtes ouvert à l'utilisation de JavaScript, jQuery's tab est plutôt sympa.
Le lien est rompu. –
Jetez un oeil à un exemple tel que this (courtoisie d'une recherche de Google pour 'affichage à onglets javascript').
Vous pouvez évidemment utiliser ceci avec un peu de personnalisation, mais il est instructif de le démonter et de déterminer ce qu'il fait. Il est essentiellement permet de désactiver ou <div> en utilisant le style et la mise en display à block ou none
Si « simple et compatible » sont vos deux critères seulement, je vous suggère le jQuery UI Tabs plugin. Cross-navigateur, et un jeu d'enfant à mettre en œuvre.
je dois la mettre en œuvre sans libs :( – omg
Selon vos ambitions, il peut s'agir simplement d'une liste non ordonnée et d'un nombre de <div> s (contenu de l'onglet). Ensuite, un simple JavaScript pourrait - au moyen de getElementById() - définir la propriété d'affichage pour tous les <div> s: none pour tous sauf le courant. Vous pouvez également regarder this.
Modifier: Pas le seul lien vers le site jQuery, il semble :)
Voici une list of different types of tabs ainsi que des tutoriels sur la façon de les construire
Si vous souhaitez implémenter votre propre point de vue de l'onglet, il suffit de faire comme ceci:
<html>
<head>
<style>
.tab {
display:none;
}
</style>
<script type="text/javascript">
function initTabView(){
var x = document.getElementsByClassName('tab-view')
for(var i=0; i < x.length; i++) {
x[i].onclick = displayTab;
}
var prevViewedTab = null;
function displayTab(e) {
var idOfTabToDisplay = this.getAttribute("data-tab")
if(prevViewedTab) {
prevViewedTab.style.display = 'none';
}
var tabToDisplay = document.getElementById(idOfTabToDisplay);
tabToDisplay.style.display = 'block';
prevViewedTab = tabToDisplay;
}
var defaultTab = document.getElementsByClassName('default-tab')
if (defaultTab.length) {
defaultTab[0].style.display = 'block';
prevViewedTab = defaultTab[0];
}
}
</script>
</head>
<body>
<ul>
<li>
<a data-tab="tab1" class="tab-view">Tab 1</a>
</li>
<li>
<a data-tab="tab2" class="tab-view">Tab 2</a>
</li>
<li>
<a data-tab="tab3" class="tab-view">Tab 3</a>
</li>
<li>
<a data-tab="tab4" class="tab-view">Tab 4</a>
</li>
</ul>
<div id="tabCtrl">
<div class="tab default-tab" id="tab1">This is Tab 1</div>
<div class="tab" id="tab2">This is Tab 2</div>
<div class="tab" id="tab3">This is Tab 3</div>
<div class="tab" id="tab4">This is Tab 4</div>
</div>
<script>
initTabView();
</script>
</body>
</html>
Merci, semble 9,1,3 sont toutes les valeurs possibles de nodeType, right? – omg
Selon http://www.w3.org/TR/2000/WD-DOM- Level-1-20000929/level-one-core.html # ID-1950641247, il y a 12 possibilités.Contrôler 1 nous empêche principalement d'obtenir les attributs et les nœuds de texte qui peuvent appartenir aux divs de la page à onglets. – Jacob