程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> javascript-怎樣用JavaScript實現div盒子的切換

javascript-怎樣用JavaScript實現div盒子的切換

編輯：編程解疑

怎樣用JavaScript實現div盒子的切換

html代碼：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>我的題庫</title>
<link href="css/myexbase.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="menu"> <!--頭部菜單-->
    <div id="menubar">
    <ul id="menu1">
        <li><a href="#" class="a" id="return_base">返回題庫</a>
         <div></div>  <!--空盒子，便於js遍歷-->
        </li>
        <li><a href="#" class="a">新建題庫</a>
         <div></div>  <!--空盒子，便於js遍歷-->
        </li>
        <li><a href="#" class="a">新增試題</a>
        <div>
            <a href="#">單選題</a>
            <a href="#">多選題</a>
            <a href="#">判斷題</a>
            <a href="#">填空題</a>
        </div>
        </li>
        <li><a href="#" class="a">試題浏覽</a>
        <div>
            <a href="#">單選題</a>
            <a href="#">多選題</a>
            <a href="#">判斷題</a>
            <a href="#">填空題</a>
        </div>
        </li>
        <li><a href="#" class="a">查找試題</a>
        <div>
            <a href="#">按分值查找</a>
            <a href="#">知識點查找</a>
            <a href="#">按難度查找</a>
            <a href="#">題干關鍵字</a>
        </div>
        </li>
        <input type="text" name="search" class="searchtext" >
        <input type="button" name="bsearch" class="searchbutton" value="查找"> 
    </ul>
    </div>
</div>

請問如何編寫相應的JavaScript，來實現在上例中點擊不同的菜單功能，顯示相應的div盒子，並隱藏其他菜單所對應的div盒子。我在網上找過但結果都不理想，請幫忙看看，以上述代碼為例，實現div盒子切換，請在JavaScript代碼做相應的注釋以便理解，（當然可以使用盡可能簡單易懂的語法）謝謝！