2 steve yanrun steve_yanrun 于 2016.04.07 13:19 提问

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

5个回答

steve_yanrun
steve_yanrun   2016.04.07 22:36
已采纳

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

CSDNXIAON
CSDNXIAON   2016.04.07 13:22

javascript实现div+css切换
js实现div的切换
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

yujava2014
yujava2014   2016.04.07 13:47

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

showbo
showbo   Ds   Rxr 2016.04.07 13:57

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

steve_yanrun
steve_yanrun 不好意思,现在已经更正题目了。是这样的,每一个菜单功能都有一个对应的div盒子,最后的效果就是点击某一个菜单后,就显示那个菜单对应的div,而其他菜单对应的div都隐藏,请帮忙看看有没有适合上例的办法。
2 年多之前 回复
qq_26431469
qq_26431469   2016.04.08 11:05

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js实现盒子的拉伸
拉伸盒子     前面我们实现了将一个盒子就行移动(拖拽),在这里我们将对盒子本身的大小进行操作,将盒子拉宽或者拉高。首先我们也是布局,给出一个盒子。 *{margin: 0;padding: 0;border: none;} body{padding: 100px;} #box{width: 150px;height: 100px;backgrou
如何通过css实现自动换行
最近在公司做web页面的时候,就遇到了一个需要自动换行的这个场景,当时第一时间想到的是使用Js来完成 自动换行,但是用js又有点麻烦,代码有点多,于是就想到通过css来实现自动换行。以下两种方法都是通过css来实现的 两种方法的使用,要看什么情况下吧? 方法1,这种方法是使用word-break:break-all:width:120px;前面的是指定自动换行,后面的是告诉它宽度超过120p
java-js-通过javascript实现九九乘法表
通过JavaScript实现九九乘法表。
用javascript实现动态切换模块
首先列出CSS代码:  /**//* 舌签文字链 */.TextAdsTabsBlk{...}{width:100%; float:left;}.TabADS{...}{width:100%; float:left;  }.TabADS  ul{...}{ height:24px; background:#fff; float:left; overflow:inherit;}.TabA
div 显示图片特效(一张张图片的切换)
全部用DIV加上javascript实现 的图片一张一张的切换,
用js给div绑定事件,实现点击切换效果的几种方式总结
用js给div绑定事件,实现点击切换效果,总结有如下几种方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementById("titleN").value; var complaintValue = document.getElem
关于div+css的排版布局
css css通常被称为风格样式表(Style Sheet),是用来进行网页风格设计的。通过设立样式表,可以统一的控制HTML中标签的显示属性,精确地定位网页元素的位置,从而更有效的美化页面外观。CSS实现了网页内容HTML和表现的分离,使得页面布局更加灵活,还可以有效的节省网络带宽,调高用户的体验。 div是一个标签....通过这对标签可以定义HTML文档中的分区,即可以把H
一个精简的JS DIV层tab切换代码
DIV层切换    function ChangeDiv(divId,divName,zDivCount)  {  for(i=0;i {  document.getElementById(divName+i).style.display="none";  //将所有的层都隐藏  }  document.getElementById(divName+divId).style.di
js实现div的显示与隐藏
实现div的id为systemNameDIV显示 document.getElementById('systemNameDIV').style.display = ""; 实现div的id的为systemNameDIV隐藏 document.getElementById('systemNameDIV').style.display = "none";
盒子概念和DiV布局
CSS盒子和DIV布局   (2013-11-24 16:17:29) 转载▼ 一、认识div层 1.标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,table,img,form等,然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰,不会影响其他HTML元素。 2.Div和span的区别 大部分div层都可以使用s