André Willemijns WebSite

Application : Tabulations

<style type="text/css" media="screen"> 
/*CSS pour 5 applications par page*/	
		
/*Tabulation ne pas modifier*/
		ul.tabulation {
		    list-style: none;
		    margin: 0;
		    padding: 0;
				margin-left: 10px;
		}
 
		ul.tabulation li {
		    display: inline;
		}
 
		ul.tabulation li a {
		    padding: 8px 15px;
		    background-color: #ccc;
		    color: #000;
		    text-decoration: none;
				font: bold 14px/34px verdana;
		}
 
		ul.tabulation li a.selected,
		ul.tabulation li a:hover {
		    background-color: #0066cc;
		    color: #fff;
		    padding-top: 7px;
				padding: 13px 15px;
		}
		
		ul.tabulation li a:focus {
			outline: 0;
		}
 
/*Contenu modification possible*/				
		.box h2, .box1 h2, .box2 h2, .box3 h2, .box4 h2 {
			margin-top: 0;
			bold 14px/18px verdana;
			color: #330000;
		}
		
		.box, .box1, .box2, .box3, .box4 {
		background: #fff2d9;
		padding: 5px;
		margin-top: 3px;
		border: 5px solid #0066cc;
		height: 100px;
		overflow: auto;
		}
/*Ensemble fixer la largeur*/		
 		.tabs, .tabs1, .tabs2, .tabs3, .tabs4 {
		width: 600px; 
		margin: 20px auto;
		}
    </style> 
 
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" charset="utf-8">
	//script à copier si plusieurs application par page 
		$(function () {
			var allcontenu = $('.box');//a modifier eventuellement "box"
			allcontenu.hide().filter(':first').show();
			
			$('div.tabs ul.tabulation a').click(function () {//a modifier eventuellement "tabs"
				allcontenu.hide();
				allcontenu.filter(this.hash).show(); 
				$('div.tabs ul.tabulation a').removeClass('selected');//a modifier eventuellement "tabs"
				$(this).addClass('selected');
				return false;
			}).filter(':first').click();
		});
	</script> 
	
	
    <div class="tabs"> 
        <ul class="tabulation"> 
            <li><a href="#c1">Démonstration</a></li> 
            <li><a href="#c2">A inserer dans head</a></li> 
            <li><a href="#c3">A insérer dans body</a></li> 
        </ul> 
        <div class="box" id="c1"> 
            <h2>1</h2> 
            <p>Ici mon premier contenu</p>
						
						</div> 
        <div class="box" id="c2"> 
 
            <h2>2</h2> 
            <p>Ici mon deuxieme contenu</p> 
        </div> 
        <div class="box" id="c3"> 
            <h2>3</h2> 
            <p>Ici mon dernier contenu</p> 
        </div> 
    </div>