creer une navigation par onglet par Benjamin1206 - page 1

bonjour mes géants de ce forum

je veux créer un site web. sur une de mes page je veux insérer de la navigation par onglet.

voici le code HTML CSS et Jquery.

veuillez bien me donner correction . je suis débutant en java . Merci

<!DOCTYPE html >
<html lang="fr">
<head>
	
	<title>article </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta  name="description" content="" />
	<meta  name="author" content="" />
	

	<link rel="stylesheet" type="text/css" href="style/nivo.css" />
	<link rel="stylesheet" type="text/css" href="style/article2.css" />

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/article2.js"></script>
	<script type="text/javascript">
    </script>
</head>
<body>
<div id="total">

<div class="bloc">
	<div class="title">
		Mon Titre
		<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>
	<div id="contenu1">
	<h1>Titre 1</h1>
	<p> La partie électrique et le photovoltaïque m'ont le plus interessé. Le style de la formation très concrète et très imagée et documentée grâce au vécu du formateur. Très bien, petit effectif et pluralité des participants. L'intendance est parfaite, très bonne attention du personnel aux stagiaires
	</p>
	</div>
	<div id="contenu2">
	<h1>Titre 2</h1>
	<p>  Le style de la formation très concrète et très imagée et documentée grâce au vécu du formateur. Très bien, petit effectif et pluralité des participants. L'intendance est parfaite, très bonne attention du personnel aux stagiaires
	</p>
	</div>
	<div id="contenu3">
	<h1>Titre 3</h1>
	<p> Très bien, petit effectif et pluralité des participants. L'intendance est parfaite, très bonne attention du personnel aux stagiaires
	</p>
	</div>
</div> 

</div>

</body>
</html>

code css

@charset "utf-8";
/* CSS Document */

html{font-size:100%;
width: ;}



.bloc .title{
	height: 50px;
	color: #FFF;
	background-color:blue ;
	width: 100%;
	position:relative;
	font-size: 20px;
}
.title a{
	
	color: #FFF;
	
}
.bloc .tabs{
	position:absolute;
	right: 0;
	bottom:0;
}

.bloc .tabs a{
	display: inline-block;
	color: white;
	text-decoration: none;
	font-size: 20px;
	bottom: 10px;
	padding: 0 10px 15px 10px;
	font-weight: normal;
	line-height: 20px;
	border-radius:10px 10px 0 0 ; 
}

.bloc .tabs a:hover, .bloc .tabs a.active{
	background-color: #FFF;
	color: #000;
	
}

code java

/*
LORSQUE l'on clique sur un onglet
	*On retire la class active de l'onglet actif
	*j'ajoute la class active à l'onglet actuel

	*On retire la class active sur l'onglet actif
	j'ajoute la class active sur le contenu correspond à mon clic 

*/


jQuery(function($){

	var anchor = window.location.hash;
	$('.tabs').each(function(){
		var current = null;
		if(anchor != ''&& $(this).find('a[href="'+current+'"]').lenght > 0){
			current = anchor;
		}else{
			current = $(this).find('a:first').attr('href');
		}
		
		$(this).find('a[href="'+current+'"]').addclass('active');
		$(current).siblings().hide();
		$(this).find('a').click(function(){
			var link= $(this).attr('href');
			if(link == current){
				return false;
			}else{
				$(this).siblings().removclass('active');
				$(this).addclass('active');
				$(link).show().siblings().hide();
				current=link;
			}
		});
	});

});

Merci de me soutenir

creer une navigation par onglet

creer une navigation par onglet

Supprimer

Modérer

Signaler le message aux modérateurs