Ray-Yan
2016-04-07 05:19
采纳率: 65.9%
浏览 3.1k

怎样用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代码做相应的注释以便理解,(当然可以使用尽可能简单易懂的语法)谢谢!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • Ray-Yan 2016-04-07 14:36
    已采纳

    此题作废,我自己已经倒腾出来了,谢谢大家!

    已采纳该答案
    打赏 评论
  • yujava2014 2016-04-07 05:47

    可以用jquery去试试,很好用的div的hide()和show()

    打赏 评论
  • 贴那么多代码,点击那里显示对应的div都没说清楚。。那不是点击按钮先将所有div隐藏,然后document.getElmentById显示你这个按钮对应的div

    打赏 评论
  • 听风暖 2016-04-08 03:05

    点击后 可以执行先隐藏所有div 然后展示点击的div

    打赏 评论

相关推荐 更多相似问题