11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un système de tableau avec un fichier css avec la méthode target sur la class "anchor" pour changer les attributs background et color lorsqu'on sélectionne un onglet du tableau.
Mais j'aimerai que lorsque la page s'affiche on soit directement sur l'onglet TABULATION1.

Merci d'avance pour votre aide.




<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<div id="tabs-principal" style="position: relative; width: 640px; height: 411px; background-color: #f1f1f1;">
<article class="tabs">
	<span id="tab1" class="anchor"></span>
	<div class="panel" style="width: 157px;"><a class="tab-link" href="#tab1" style=""><span id="tab-icon1" style="margin-right:17px; float:left; width:30px; height:31px">&nbsp;</span>Tabulation1</a>
		<div class="tabspanel" style="opacity:1; padding:20px;">
			TAB 1
		</div>
	</div>
	<span id="tab2" class="anchor"></span>
	<div class="panel" style="width: 157px; margin-left:4px;"><a class="tab-link" href="#tab2"><span id="tab-icon2" style="margin-right:17px; float:left; width:21px; height:32px;">&nbsp;</span>Tabulation2</a>
		<div class="tabspanel" style="padding:0px; height:381px">
			TAB 2
		</div>
	</div>
	<span id="tab3" class="anchor"></span>
	<div class="panel" style="width: 157px; margin-left:4px;"><a class="tab-link" href="#tab3"><span id="tab-icon3" style="margin-right:17px; float:left; width:30px; height:27px;">&nbsp;</span>Tabulation3</a>
		<div class="tabspanel" style="padding:17px;">
			TAB 3
		</div>
	</div>
	<span id="tab4" class="anchor"></span>
	<div class="panel" style="width: 157px; margin-left:4px;"><a class="tab-link" href="#tab4">Tabulation4<span id="tab-icon4" style="float:right; margin-right:42px; width:37px; height:15px;">&nbsp;</span></a>
		<div class="tabspanel" style="padding:8px 12px 0px; 12px;">
			TAB 4
		</div>
	</div>
</article>
</div>

<script language="JavaScript" type="text/javascript">
</script>


Une partie du CSS :


		.panel .tab-link {
			margin-top: 0px;
			float: left;
			width: 100%;
			height:50px;
			padding: 12px;
			/*border:1px solid #babcbe;*/
			background: #f1f1f1 url("../images/2014/tab-normal.jpg") no-repeat left top;
			margin-right:0%;
			text-decoration: none;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 1em;
			color: #a7a9ac;
			text-align: left;
			text-transform: uppercase;
			/*border-top-left-radius: 5px;*/
			/*border-top-right-radius: 5px;*/
			-webkit-transition: all 0.6s ease;
			-moz-transition: all 0.6s ease;
			-ms-transition: all 0.6s ease;
			-o-transition: all 0.6s ease;
			transition: all 0.6s ease;
		}
		
		
		.panel .tab-link  #tab-icon1 {
			background: transparent url("./images/2014/icon-1.png") no-repeat left top;
			-webkit-transition: all 0.6s ease;
			-moz-transition: all 0.6s ease;
			-ms-transition: all 0.6s ease;
			-o-transition: all 0.6s ease;
			transition: all 0.6s ease;			
		}
		
		.panel .tab-link  #tab-icon2 {
			background: transparent url("./images/2014/icon-2.png") no-repeat left top;
			-webkit-transition: all 0.6s ease;
			-moz-transition: all 0.6s ease;
			-ms-transition: all 0.6s ease;
			-o-transition: all 0.6s ease;
			transition: all 0.6s ease;			
		}
		
		.panel .tab-link  #tab-icon3 {
			background: transparent url("./images/2014/icon-3.png") no-repeat left top;
			-webkit-transition: all 0.6s ease;
			-moz-transition: all 0.6s ease;
			-ms-transition: all 0.6s ease;
			-o-transition: all 0.6s ease;
			transition: all 0.6s ease;			
		}
		
		.panel .tab-link  #tab-icon4 {
			background: transparent url("./images/2014/icon-4.png") no-repeat left top;
			-webkit-transition: all 0.6s ease;
			-moz-transition: all 0.6s ease;
			-ms-transition: all 0.6s ease;
			-o-transition: all 0.6s ease;
			transition: all 0.6s ease;			
		}
		

			.panel .tab-link:visited {
				color: #a7a9ac;
			}

	.anchor:target + .panel div {
		opacity: 1;
		background: #FFFFFF;
		z-index: 999;
	}

		.anchor:target + .panel .tab-link {
			color:#1265a6;
			background: #1284da url("./images/2014/tab-active.jpg") no-repeat left top;
		}
		
		.anchor:target + .panel .tab-link .color-exphyundai {
			color:#ee2e23;
		}		
		
		.anchor:target + .panel .tab-link #tab-icon1 {
			color:#1265a6;
			background: transparent url("./images/2014/icon-1-active.png") no-repeat left top;
		}
		.anchor:target + .panel .tab-link #tab-icon2 {
			color:#1265a6;
			background: transparent url("./images/2014/icon-2-active.png") no-repeat left top;
		}
		.anchor:target + .panel .tab-link #tab-icon3 {
			color:#1265a6;
			background: transparent url("./images/2014/icon-3-active.png") no-repeat left top;
		}
		.anchor:target + .panel .tab-link #tab-icon4 {
			color:#1265a6;
			background: transparent url("./images/2014/icon-4-active.png") no-repeat left top;
		}