javascript之dom編程（5）：常用對象4

最後更新：2015-08-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：javascript

案例一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<script type="text/javascript">
function test(obj){
//myspan
if(obj.innerText=="+"){
//顯示成員
myul.style.display="block";
obj.innerText="-";
}else if(obj.innerText=="-"){

myul.style.display="none";
obj.innerText="+";
}
}
</script>
<body>
<span id="myspan" onclick="test(this);" style="border: 3px solid red;cursor :hand;">+</span> java分類
<ul id="myul" style="display:none">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
</body>
</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=utf-8" />
<title>無標題文檔</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-size:12px;
}
.nav {
width:980px;
min-height:30px;
margin:0 auto;

text-align:center;
line-height:28px;
z-index:10px;
}
.nav li {
float:left;
margin-left:4px;
}
.nav li a {
width:78px;
min-height:28px;
display:block;

border:1px solid #333;
cursor:pointer;
}
.nav li a:hover {

}
.nav li:hover ul {
display:block;
}
.nav li ul {
width:78px;
min-height:28px;
display:none;
}
.nav li ul li {
margin:0;
}
.nav li ul li a {
width:78px;
min-height:28px;
display:block;
}
.nav li:hover ul li ul {
display:none;
}
.nav li ul li:hover ul {
display:block;
}
.nav li ul li ul {
width:78px;
min-height:28px;
margin:-30px 0 0 80px;
float:left;
position:absolute;
display:none;
}
.nav li ul li ul li {
margin:0;
}
.nav li ul li ul li a {
width:78px;
min-height:28px;
display:block;
}
</style>
</head>
<script>
window.onload=function()
{
oLi=document.getElementById("change");
oCh=oLi.getElementsByTagName("li");
for(var i=0;i<oCh.length;i++)
{
if(i%2==0){
oCh[i].style.background=‘red‘;
}
}
}
</script>
<body>
<ul class="nav">
<li><a>圖片</a>
<ul>
<li><a>動物世界</a>
<ul id="change">
<li><a>狗</a></li>
<li><a>貓</a></li>
<li><a>狼</a></li>
</ul>
</li>
<li><a>人與社會</a>
<ul>
<li><a>金融風暴</a></li>
<li><a>倫理道德</a></li>
<li><a>昨天與未來</a></li>
</ul>
</li>
<li><a>進化史</a>
<ul>
<li><a>猿人</a></li>
<li><a>人猿</a></li>
<li><a>智人</a></li>
</ul>
</li>
</ul>
</li>
<li><a>運動</a>
<ul>
<li><a>球類</a>
<ul>
<li><a>籃球</a></li>
<li><a>足球</a></li>
<li><a>排球</a></li>
</ul>
</li>
<li><a>跑步</a>
<ul>
<li><a>長跑</a></li>
<li><a>慢跑</a></li>
<li><a>快跑</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

著作權聲明：博主原創文章，轉載請說明出處。http://blog.csdn.net/dzy21

javascript之dom編程（5）：常用對象4

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript之dom編程（5）：常用對象4

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support