A little problem with multi tab
Hello,
I've done a menu with tab wich swich with jQuery.
With 1 menu, it's ok, but there're 2 menus: there is a little
probleme. You can see it here: http://www.tzameti.powa.fr/
Here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test menu</title>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen" />
<script src="scripts/jquery-1.2.3.min.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
</head>
<body>
<div id="tabbed_box_1" class="tabbed_box">
<h4>Menu 1 <small>Selectioner un onglet</small></h4>
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Test 1</a></
li>
<li><a href="#" title="content_2" class="tab">Test 2</a></li>
<li><a href="#" title="content_3" class="tab">Test 3</a></li>
</ul>
<div id="content_1" class="content">
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
</div>
</div>
<div id="tabbed_box_1" class="tabbed_box">
<h4>Menu 2 <small>Selectioner un onglet</small></h4>
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_4" class="tab active">Test 1</a></
li>
<li><a href="#" title="content_5" class="tab">Test 2</a></li>
<li><a href="#" title="content_6" class="tab">Test 3</a></li>
</ul>
<div id="content_4" class="content">
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div id="content_5" class="content">
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div id="content_6" class="content">
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Do you have a solution?
Thanks by advance.
Sorry for my poor English ^^