求一个JS控制DIV显示和隐藏

Posted 2023-04-03

求一个JS控制DIV显示和隐藏，就是点一下A锚点，然后A锚点下面的DIV就display:none;隐藏起来，再点一下A锚点，DIV就display:blcak;显示出来。

<a href="#" onclic="fun();return false;">显示或隐藏</a>
<div id="show_hide">这是一个div</div>
<script type="text/javascript">
function fun()
    var div = document.getElementById('show_hide');
    if(div.style.display=='block')
        div.style.display='none';
    else
        div.style.display='block'; 
    

</script>

 document.getElementById会根据id选择div；

如果使用jq和css3会有更好的效果，有兴趣可以百度一下相关资料。

追问

为撒，我按你这个代码，测试没任何反应？

参考技术A 比如说div的<div id='box'> ...... </div>
可以在<a href="javascript:operatorDiv('box');" id="btn">显示或隐藏DIV</a>

<script type="text/javascript">
function operatorDiv(id)
var div = document.getElementById(id);

div.style.display = (div.style.display == "none") ? "block" : "none";

</script>

注：JS一定要放到A标签或DIV之前，
==============================================================
如果用jQuery的话就更方便了；
比如说div的<div id='box'> ...... </div>
可以在<a id="btn">显示或隐藏DIV</a>
<script type="text/javascript">
$(document).ready(function()
$("#btn").click(function()
$("#box").toggle();

);

);

</script> 参考技术B document.getElementById('a').click=function()
var div= document.getElementById('div');
if(div.style.display=='block')
div.style.display='none';
else
div.style.display='block';



追问

一个页面有多个这种a标签对应多个div这样会冲突不？

追答

会！建议用jquery

追问

我做的测试不生效，不知道什么原因，能不能帮我看一下。
地址是：http://www.cdncsj.com/cs.html
找到原因了，网友推荐那个代码里，onclick少了一个k，一直没发现，细节坑人啊。

本回答被提问者采纳

如何实现js控制div的隐藏及显现

就是有三个div ，当显示其中一个时隐藏其他的俩个，，怎么实现。。真心的请教大侠们，，帮帮我啊

需要准备的材料分别是：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建一个html文件，例如：index.html。

2、在index.html文件的<script>标签中，写入js：

$('button').click(function ()

$('div').hide();

$('div').eq(parseInt(3 * Math.random())).show();

);

3、浏览器运行index.html页面，此时点击btn按钮总会显示其中1个div和隐藏另外2个div。

参考技术A

需要准备的材料分别是：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建一个html文件，例如：index.html。

2、在index.html文件的<script>标签中，写入js：

$('button').click(function ()

$('div').hide();

$('div').eq(parseInt(3 * Math.random())).show();

);

3、浏览器运行index.html页面，此时点击btn按钮总会显示其中1个div和隐藏另外2个div。

参考技术B

javascript 控制 div元素 显示/隐藏  ：

获取该div元素


设置该元素的样式

具体代码如下：

<script type="text/javascript">
    function display(id)  
        var traget=document.getElementById(id);  
        if(traget.style.display=="none")  
            traget.style.display="";  
        else  
            traget.style.display="none";  
        
     
</script>

参考技术C 先把所有的都隐藏起来，再把点击的div显示出来，是可以实现只显示一个div的效果的 参考技术D $("#div1").hide（）；$("#div2").hide（）； $("#div3").show();本回答被提问者采纳