Le code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Des onglets</title>
<script src="jquery-3.1.1.min.js"></script>
<style>
ul,li {
margin:0;
padding:0;
list-style-type: none;
}
#onglets {
display:flex;
}
#onglets li {
padding:10px;
background-color:#ddd;
border-radius:6px 6px 0 0;
margin-right:2px;
cursor:pointer;
}
#onglets li:hover {
background-color:#ccc;
}
#contenus div {
padding:20px;
background-color:#ddd;
min-height:300px;
}
</style>
</head>
<body>
<ul id="onglets">
<li class="actuel" data-tab="tab1">Tab 1</li>
<li data-tab="tab2">Tab 2</li>
<li data-tab="tab3">Tab 3</li>
</ul>
<section id="contenus">
<div id="tab1">Contenu du tab 1</div>
<div id="tab2">Contenu du tab 2</div>
<div id="tab3">Contenu du tab 3</div>
</section>
<script>
$(document).ready(function(){
active_tab();
$("#onglets li").click(function(){
if(! $(this).hasClass("actuel")){
$(this).addClass("actuel").siblings().removeClass("actuel");
active_tab();
}
});
});
function active_tab(){
var lequel=$("#onglets .actuel").attr("data-tab");
$("#"+lequel).show().siblings().hide();
}
</script>
</body>
</html>