1
J'ai ce fichier HTML avec des styles CSS, maintenant j'essaie de créer des onglets verticaux mais quand la page charge tout le contenu est affiché, puis si je choisis un particulier onglet seul le contenu de cet onglet est l'affichage mais je suis juste inquiet lorsque la page. Comment se fait-il que tout le contenu de l'onglet soit affiché? Voici le code.Onglets CSS avec jQuery: afficher uniquement le contenu de l'onglet en cours
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Follow me!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
ul.tabs {
margin-top: 20px;
padding: 0;
list-style: none;
height: 32px; /*--Set height of tabs--*/
/*border-bottom: 1px solid #999;
border-left: 1px solid #999;*/
float:left;
}
ul.tabs li a {
text-decoration: none;
color: #000;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.spacing {
margin-left:90px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$("ul.tabs li:first-child a").addClass("active").show(); //Activate first tab
$(".tab_content #link1").css("display", "block"); //Show first tab content
//On Click Event
$("ul.tabs li a").click(function() {
$("ul.tabs li a").removeClass("active"); //Remove any "active" class
$(".tab_content div").css("display","none");
$(this).addClass("active"); //Add "active" class to selected tab
var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
</head>
<body>
<ul class="tabs">
<li><a href="#link1" class="tab_content">Link1</a></li>
<li><a href="#link2" class="tab_content">Link2</a></li>
<li><a href="#link3" class="tab_content">Link3</a></li>
</ul>
<div class="tab_content spacing">
<div id="link1">
<p>Link1</p>
</div>
<div id="link2">
<p>Link2</p>
</div>
<div id="link3">
<p>Link3</p>
</div>
</div>
</body>
</html>