onglets à l'interieur d'un panel
Bonjour à tous
Après des recherches sur google qui non rien retourné, je fais appel à vous afin de trouver une solution.
Je m'explique j'ai ma page (capture d'écran ci-dessous)
4 onglet par defaut.
mon but est d'avoir un liens qui va ajouter un nouvel onglet avec une possibilité de fermer via ce nouvel onglet via une croix.
En clair mon but est d'ouvrir la page d'un membre dans un nouvel onglet sans avoir a rafraichir la page..
http://img11.hostingpics.net/pics/735985Sanstitre.png
Page index.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>page</title>
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"
src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tabs_et_nav.js"></script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">Patients</a></li>
<li><a href="#tab2">Comptabilité</a></li>
<li><a href="#tab3">Resources</a></li>
<li><a href="#tab4">Paramètres</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<ul id="nav">
<li><a href="renseignement.php">Renseignement</a></li>
<li><a href="antecedents.php">Antécédents</a></li>
<li><a href="examen.php">Examen</a></li>
<li><a href="documents.php">Documents</a></li>
<li><a href="facture.php">Facture</a></li>
</ul>
<div id="content">
<h2>Welcome!</h2>
<p>Hi, welcome to the demonstration for the NETTUTS tutorial - "How to Load In and Animate Content with jQuery"</p>
<p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery..</p>
</div>
</div>
<div id="tab2" class="tab_content">
<h2>2</h2>
</div>
<div id="tab3" class="tab_content">
<h2>3</h2>
</div>
<div id="tab4" class="tab_content">
<h2>4</h2>
</div>
</div>
</div>
</body>
</html> |
Ficher CSS style.css
fichier js tabs_et_nav.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
//***** Fonction pour le menu tabs
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
//***** Fonction pour le menu Nav
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
}); |
