Bonjour tout le monde, je suis en train de faire un header pour un site qui va marche par onglet, l'onglet actif est biensur différent des autres onglets,
Je sais modifier les propriétés du css avec un code javascript, mais le problème c'est qu'il modifie bien le background, mais pas la bordure... et je ne vois pas d'ou peut venir ce soucis, le code est 'juste'.
voici les 3 parties de ce projet : Index.html, style.css et script.js
Index.html :
Style.css :
script.js :
oui le script ne dois pas etre optimisé, mais je débute
Si vous avez une solution je suis prenneur !
merci encore.
En gros pour résumé quand je clique sur l'item numéro deux, l'item un devrait se transformer comme l'item trois, quatre et cinque, mais au lieu de ça, il y a juste le fond qui se transforme, la bordure du bas reste blanche.
Modifié par DevJoe (07 Dec 2007 - 10:21)
Je sais modifier les propriétés du css avec un code javascript, mais le problème c'est qu'il modifie bien le background, mais pas la bordure... et je ne vois pas d'ou peut venir ce soucis, le code est 'juste'.
voici les 3 parties de ce projet : Index.html, style.css et script.js
Index.html :
<!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>Web TV</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<div class="header">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" id="current1" onClick="Menu(1);">Item one</a></li>
<li><a href="#" id="current2" onClick="Menu(2);">Item two</a></li>
<li><a href="#" id="current3">Item three</a></li>
<li><a href="#" id="current4">Item four</a></li>
<li><a href="#" id="current5">Item five</a></li>
</ul>
</div>
<div class="barre"><div class="texte_header">Test</div></div>
</div>
<body>
</body>
</html>
Style.css :
/* CSS Document */
body {
background-color: #FFFFFF;
color: #000000;
font-size: 12px;
}
a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-size: 19px;
}
a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-size: 19px;
}
a:visited {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-size: 19px;
}
a:hover {
color: #FF9900;
font-weight: bold;
text-decoration: underline;
font-size: 19px;
}
.header {
margin: 0px auto;
height: 80px;
width: 800px;
}
.barre {
margin: 0px;
height: 60px;
width: 800px;
background-color:#FFFFFF;
border-bottom: 1px solid #778;
border-left: 1px solid #778;
border-right: 1px solid #778;
}
.texte_header {
position: relative;
top: 12px;
left: 20px;
color: #778;
font-weight: bold;
font-size: 30px;
}
#navlist
{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0px;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current1
{
background: white;
border-bottom: 1px solid #FFFFFF;
}
#navlist li a#current2
{
background: #DDE;
border-bottom: 1px solid 778;
}
#navlist li a#current3
{
background: #DDE;
border-bottom: 1px solid 778;
}
#navlist li a#current4
{
background: #DDE;
border-bottom: 1px solid 778;
}
#navlist li a#current5
{
background: #DDE;
border-bottom: 1px solid 778;
}
script.js :
// JavaScript Document
function Menu(_num) {
if(_num == 1) {
document.getElementById("current1").style.background="#FFFFFF";
document.getElementById("current1").style.borderBottom="1px solid #FFFFFF";
document.getElementById("current2").style.background="#DDE";
document.getElementById("current2").style.borderBottom="1px solid 778";
document.getElementById("current3").style.background="#DDE";
document.getElementById("current3").style.borderBottom="1px solid 778";
document.getElementById("current4").style.background="#DDE";
document.getElementById("current4").style.borderBottom="1px solid 778";
document.getElementById("current5").style.background="#DDE";
document.getElementById("current5").style.borderBottom="1px solid 778";
}
if(_num == 2) {
document.getElementById("current1").style.background="#DDE";
document.getElementById("current1").style.borderBottom="1px solid 778";
document.getElementById("current2").style.background="#FFFFFF";
document.getElementById("current2").style.borderBottom="1px solid #FFFFFF";
document.getElementById("current3").style.background="#DDE";
document.getElementById("current3").style.borderBottom="1px solid 778";
document.getElementById("current4").style.background="#DDE";
document.getElementById("current4").style.borderBottom="1px solid 778";
document.getElementById("current5").style.background="#DDE";
document.getElementById("current5").style.borderBottom="1px solid 778";
}
}
oui le script ne dois pas etre optimisé, mais je débute
Si vous avez une solution je suis prenneur !
merci encore.
En gros pour résumé quand je clique sur l'item numéro deux, l'item un devrait se transformer comme l'item trois, quatre et cinque, mais au lieu de ça, il y a juste le fond qui se transforme, la bordure du bas reste blanche.
Modifié par DevJoe (07 Dec 2007 - 10:21)