JS練習題（下拉式功能表；好友選中輸入）

最後更新：2016-09-26 來源：互聯網

上載者：User

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

標籤：

題一、左側菜單下拉

做題思路：先做菜單和子功能表，把子功能表預設隱藏。再用JS調樣式。

<body>
<div style="width:500px; height:500px">
<div id="shouye" class="text1">
<div class="text2" onclick="Show()">首頁</div>
<div class="text3">></div>
</div>

<div id="jiaowu" class="text1"; onclick="Show(‘z1‘)">
<div class="text2">教務資訊</div>
<div class="text3">></div>
</div>
<div class="zi" id="z1">
<div class="text4">查看通知</div>
<div class="text4">發送通知</div>
</div>

<div id="xiazai" class="text1" ; onclick="Show(‘z2‘)">
<div class="text2">下載專區</div>
<div class="text3">></div>
</div>
<div class="zi" id="z2">
<div class="text4">簡曆檔案下載</div>
<div class="text4">教師評測下載</div>
<div class="text4">其它下載</div>
</div>
<div id="xueyuan" class="text1" ; onclick="Show(‘z3‘)">
<div class="text2">學員資訊管理</div>
<div class="text3">></div>
</div>
<div class="zi" id="z3">
<div class="text4">項目</div>
<div class="text4">考試</div>
<div class="text4" id="z33">作業</div>
</div>

</div>

</body>
<script type="text/javascript">
function Show(id)//用變數id（形參）接收根據接收的變數找到要操作的項。
{
　　var z = document.getElementById(id);//點擊主菜單，子功能表顯示
　　if(z.style.display=="block")//如果原先子功能表是顯示的
　　{
　　　　z.style.display="none";//讓原先顯示的隱藏
　　}
　　else//如果原先是隱藏的
　　{
　　　　z.style.display="block";//讓原先隱藏的顯示
　　}
}

</script>

題二、好友名單選中

*{ margin:0px auto; padding:0px}
.text{ width:150px; height:35px; border:2px solid white; text-align:center; line-height:30px; vertical-align:middle; color:white}
.text:hover{ cursor:pointer;}
</style>
</head>

<body>
<div style="width:500px; height:500px; margin-top:30px">
<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">叫一聲</div>
<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">佛祖</div>
<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">回頭</div>
<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">無岸</div>
</div>
</body>
<script type="text/javascript">
function Show(a)//用一個形參接收變數
{
　　var attr = document.getElementsByClassName("text");//找到所有的好友
　　for(i=0;i<attr.length;i++)
　　{
　　　　attr[i].style.backgroundColor="#63C";//先背景色設定為是預設的顏色，防止點擊一個之前點擊更換的背景色不變回預設的顏色。
　　　　attr[i].setAttribute("xz","0");//清別的選項的背景色，設定為0.
　　}
　　a.setAttribute("xz","1");//代表選中，設定為1.
　　a.style.backgroundColor="#F63";//點擊換背景色
}
function Bian(a)//滑鼠放上以後背景色改變,但是原先滑鼠選定的背景顏色會改變成預設顏色。
{
　　var attr = document.getElementsByClassName("text");
　　for(i=0;i<attr.length;i++)
　　{
　　　　if(attr[i].getAttribute("xz")=="0")//要在前面加上xz的屬性，預設等於0。
　　　　{
　　　　　　attr[i].style.backgroundColor="#63C";
　　　　}
　　}
　　a.style.backgroundColor="#F63";
}
function Hui(a)//滑鼠離開後顏色返回預設顏色
{
　　var attr = document.getElementsByClassName("text");
　　for(i=0;i<attr.length;i++)
　　{
　　　　if(attr[i].getAttribute("xz")=="0")
　　　　attr[i].style.backgroundColor="#63C";
　　}
}
</script>

JS練習題（下拉式功能表；好友選中輸入）

本文章原先以中文撰寫並發佈於 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

JS練習題 （ 下拉式功能表；好友選中輸入）

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

JS練習題（下拉式功能表；好友選中輸入）