11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je suis entrain de faire un menu avec des tabs horizontals.
Le code html:
======================================================
<html>
<head>

<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css">
body, td {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;
}
.portletBdr {
border-right:solid 1px #580030;
border-left:solid 1px #580030;
border-bottom:solid 1px #580030;
}
.portletL-pad {
padding-left: 5px;
}

.mktgImg { margin: 0 0 10px 0; }

#mileP { margin: 10px 0 0 20px; }

#fareF { margin: 0 0 0 20px; }
#mid { width: 285px; margin: 0 0 0 10px; }
#mid div.fSale { margin: 0 0 10px 0; }

#btm { margin: 20px 0 0 10px; }
</style>



<SCRIPT LANGUAGE="JavaScript">
<!--
if (navigator.appVersion.indexOf("Win") != -1) {
if (document.layers){
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_pc_n.css'>");
}
// NN4+
else if (document.all) {
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_pc_e.css'>");
// MSIE4+
}
} else if (navigator.appVersion.indexOf("Mac") != -1) {
document.write("<LINK REL=stylesheet TYPE='text/css' HREF='./newtab/ual_style_mac.css'>");
} else {
// not a v 4 or +
}
//-->
</script>
<script language="JavaScript" src="./newtab/homepage.js" type="text/javascript"></script>
</head>

<!--- <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" link="#0033cc" alink="#000000" vlink="#0066ff" onLoad="TTADVS.pageOnLoad(); ADVS.pageOnLoad(); MM_preloadImages('./newtab/tab_FF_off.gif','./newtab/tab_CI_on.gif','./newtab/tab_CI2_off.gif','./newtab/tab_FS_on.gif','./newtab/tab_FS2_off.gif')"> --->
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" link="#0033cc" alink="#000000" vlink="#0066ff" onLoad="MM_preloadImages('./newtab/tab_FF_off.gif','./newtab/tab_CI_on.gif','./newtab/tab_CI2_off.gif','./newtab/tab_FS_on.gif','./newtab/tab_FS2_off.gif')">




<div id="fareF">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" valign="top" bgcolor="#ffffff" nowrap><img src="./newtab/tab_FF_on.gif" name="n_FF" id="n_FF" alt="Search" border="0" width="96" height="40" onClick="f_chooseFF(this);"><img src="./newtab/tab_CI_off.gif" name="n_CI" id="n_CI" alt="Timetable" border="0" width="96" height="40" onClick="f_chooseCI(this);"><img src="./newtab/tab_FS_off.gif" name="n_FS" id="n_FS" alt="CheckMyTrips" border="0" width="96" height="40" onClick="f_chooseFS(this);"></td><!---- Do not go to the line, else display will be modified -->
<td width="7" rowspan="2" valign="top" id="portletRshadow">&nbsp;</td>
</tr>
<tr>
<td height="500" align="center" valign="top" bgcolor="#ffffff" class="portletBdr">

<!------------------------------------------------------ First Tab --------------------------------------------------------------->
<div id="cntFareFinder" style="display: block;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>

<tr>
<td>
<!-------------- Module1 -------------------------------->

<!-------------- End module1 ------------->
</td>
</tr>

</tbody>
</table>
</div>
<!---------------------------------------------- End First Tab ---------------------------------------------------------->


<!----------------------------------------- 2nd Tab ---------------------------------------------------------------------->
<div id="cntCheckIn" style="display: none;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>



</td>
</tr>

</tbody>
</table>
</div>


<!----------------------------------------- End 2nd Tab ------------------------------------------------------------------>

<!----------------------------------------- 3rd Tab ---------------------------------------------------------------------->
<div id="cntFlightStatus" style="display: none;">
<table width="286" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="tbl_ECO">
<tbody>
<tr>
<td>




</td>
</tr>
</tbody>
</table>
</div>
<!----------------------------------------- End 3rd Tab ------------------------------------------------------------------>

</td>
</tr>
</table>
</div>

</div>
<!---------------------- End div container --------------------------->

</body>
</html>

====================================================

Fichier JS:

======================================================

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


// inserts backward compatible css background image support
//document.write('<link rel="stylesheet" href="./newtab/bg.css" type="text/css">');

function f_chooseFF(img) {
if(img.src.indexOf('on') == -1){
show('cntFareFinder');
hide('cntFlightStatus');
hide('cntCheckIn');

document.images['n_FF'].src = './newtab/tab_FF_on.gif';
document.images['n_FS'].src = './newtab/tab_FS_off.gif';
document.images['n_CI'].src = './newtab/tab_CI_off.gif';
}
}
function f_chooseCI(img) {
if(img.src.indexOf('on') == -1){
hide('cntFareFinder');
hide('cntFlightStatus');
show('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_off.gif';
document.images['n_FS'].src = './newtab/tab_FS2_off.gif';
document.images['n_CI'].src = './newtab/tab_CI_on.gif';
}
}
function f_chooseFS(img) {
if(img.src.indexOf('on') == -1){
hide('cntFareFinder');
show('cntFlightStatus');
hide('cntCheckIn');
document.images['n_FF'].src = './newtab/tab_FF_off.gif';
document.images['n_FS'].src = './newtab/tab_FS_on.gif';
document.images['n_CI'].src = './newtab/tab_CI2_off.gif';
}
}

function show (id) {
if (document.getElementById)
document.getElementById(id).style.display = 'block';
}

function hide (id) {
if (document.getElementById)
document.getElementById(id).style.display = 'none';
}



======================================================

J'aimerais garder le tab selectionner en memoire pour lorsque je reviens sur cette page, je ne choix pas obliger de recliquer dessus.

Dans quel direction je dois m'orienter?

Merci
[/i]
Bonjour et bienvenue makena06 Smiley smile

Il semble que tu n'ais pas pris le temps de lire les règles du forum, surtout celle qui concerne la mise en ligne de code dans un post : 13- Mise en forme générale des messages.

Merci de bien vouloir corriger ton message Smiley cligne
Bonjour makena06,

Il te suffit d'éditer ton post (à l'aide du bouton "Editer" en haut à droite du post) et d'encadrer ton code dans les balises prévues à cet effet.

Smiley cligne