色卡進度條
阿新 • • 發佈:2018-05-20
ntb tel document onload nload :hover cursor borde pan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.xw{
width: 100px;
height: 80px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 80px;
}
.xw:hover{
cursor: pointer;
}
.xw1{
background-color:blue;
}
.xw2{
background-color:greenyellow;
}
.xw3{
background -color:red;
}
.xw4{
background-color:yellow;
}
#nr1{
width: 400px;
height: 400px;
border: 1px solid red;
background-color: blue;
}
#jd{
width:500px;
height: 20px;
border: 1px solid black;
}
#nei{
width:0px;
height: 20px;
background -color: blue;
}
</style>
</head>
<body>
<div id="nr">
<div class=‘xw xw1‘ onclick="gb(‘blue‘)">國內新聞</div>
<div class=‘xw xw2‘ onclick="gb(‘greenyellow‘)">國際新聞</div>
<div class=‘xw xw3‘ onclick="gb(‘red‘)">體育新聞</div>
<div class=‘xw xw4‘ onclick="gb(‘yellow‘)">娛樂新聞</div>
</div>
<div id="nr1"></div>
<br /><br /><br /><br />
<div id="jd">
<div id="nei">
</div>
</div>
<br /><br /><br /><br />
<br /><br /><br /><br />
</body>
</html>
<script type="text/javascript">
window.onload=function(){//頁面加載完成才執行裏面的代碼
jdt();
}
function gb(a) {
var b=document.getElementById("nr1");
b.style.backgroundColor=a;
}
function jdt() {
var c=document.getElementById("nei");
c.style.transition="3s";
c.style.width="500px";
}
</script>
色卡進度條