Tabs en jQuery

See the Pen Tabs en jquery by yuyazz (@yuyazz) on CodePen.

Voici un petit mémo sur la fonction tabs en jquery . Pour l’exemple, on va partir sur une page html toute simple (il faut bien sûr relier sa page à jquery pour que ca fonctionne):


	<div class="bloc">
		<div class="titre">Mes onglets
			<div class="tabs" id="tabs1">
				<a href="#contenu1">Contenu 1</a>
				<a href="#contenu2">Contenu 2</a>
				<a href="#contenu3">Contenu 3</a>
			</div>
		</div>

		<div class="content">
			<div id="contenu1">
				<h1>Contenu 1</h1>
				<p>Texte de mon contenu 1</p>
			</div>
			<div id="contenu2">
				<h1>Contenu 2</h1>
				<p>Texte de mon contenu 2</p>
			</div>
			<div id="contenu3">
				<h1>Contenu 3</h1>
				<p>Texte de mon contenu 3</p>
			</div>
		</div>
	</div>

Tout comme pour le système des ancres, on crée une liste ou une suite de liens qui vont se référer à l’ID de chaque div ou section.

<script>
			$(document).ready(function() {
				$('.tabs').each(function() {
					var courante = null;
					courante = $(this).find('a:first').attr('href');
					$(this).find('a[href="'+courante+'"]').addClass('active');
					$(courante).siblings().hide();
					$(this).find('a').click(function() {
						var link = $(this).attr('href');
						if(link == courante) {
							return false;
						}else {
							$(this).siblings().removeClass('active');
							$(this).addClass('active');
							$(link).show().siblings().hide();
							courante = $(this).attr('href');
						}
					});
				});

			});
		</script>

27/03/2014 Mis à jour le 19/12/2018 Par Copier coller | Dans jQuery