Sample Index
1. 選項卡
2. innerHTML
選項卡
- This 應用 (this:當前發生事件的人是誰)
- 新增自定義屬性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
/*
active = 當前
*/
#div1 .active{background:yellow;}
#div1 div
{
width:200px;
height:200px;
background:#CCC;
border:1px solid #999;
display:none;
}
</style>
<script>
window.onload=function()
{
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for (var i = 0 ;i<aBtn.length; i++)
{
//給每一個按鈕新增一個屬性 : index
aBtn[i].index = i ;
aBtn[i].onclick=function()
{
for (var j = 0 ; j < aBtn.length;j++)
{
aBtn[j].className='';
aDiv[j].style.display='none';
}
this.className="active";
aDiv[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="div1" >
<input class="active" type="button" value="教育" />
<input type="button" value="培訓" />
<input type="button" value="招生" />
<input type="button" value="出國" />
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
</body>
</html>
innerHTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1 {
width:200px;
height:150px;
border:1px solid black;
}
</style>
<script>
window.onload=function()
{
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function()
{
oDiv.innerHTML = oTxt.value ;
/*
innerHTML = inner HTML
舉個例:
oDiv.innerHTML = oTxt.value ;
=oDiv的裡面的HTML = oTxt的value;
而裡面的的意思 =
<div id = "div1" >
...就是這邊的文字
</div>
除此之外，我們也可以去拿裡面的文字，假如說
<div id = "div1" >
Hello world
</div>
在這個function 我們也可以印出來
alert (oDiv.innerHTML);
既然 innerHTML裡面有一個HTML
代表說也可以放一些HTML的語法
*/
}
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="設置文字" />
<div id="div1">
</div>
</body>
</html>
留言列表
Linux (2)
{{ article.title }}