2 river gg river_gg 于 2017.09.10 15:39 提问

(小白)JS/JQ怎么实现点击一个小图标隐藏一个div并且图标更换为另一个

小白虚心请教,这一块真的不是很懂,问题如题:JS/JQ怎么实现点击一个小图标隐藏一个div并且图标更换为另一个,再次点击显示内容,并且图标还原。各位大佬,如果能给个例子代码就更好了。谢谢啦(可以使用bootstrap)

4个回答

zhwyj1019
zhwyj1019   2017.09.11 12:13
已采纳
 <script>
        $(function () {
            $("#btn1").click(function () {
                $("#d1").slideToggle();
                $("#d2").slideToggle();
            });
        });
    </script>
    </head>

    <body>
        <div id="d1" style="width: 100px; height: 100px; border: 1px solid blue;float: left; display: none;"></div>
        <div id="d2" style="width: 100px; height: 100px; border: 1px solid red;float: left;"></div>
        <div style="float: left;">
            <input type="button" id="btn1" value="click" />
        </div>
    </body>
river_gg
river_gg 谢啦
2 个月之前 回复
zhwyj1019
zhwyj1019 希望对你有帮助。
2 个月之前 回复
zhwyj1019
zhwyj1019 回复zhwyj1019: 把slideToggle();里面的参数设为0就没有动画效果了slideToggle(0);里面的参数是毫秒值。
2 个月之前 回复
zhwyj1019
zhwyj1019 回复zhwyj1019: 效果。。。。
2 个月之前 回复
zhwyj1019
zhwyj1019 需要其他的小狗去查JQ的文档,还有几种别的效果
2 个月之前 回复
river_gg
river_gg   2017.09.10 17:13

大佬呢!!!~~~~~~~~~~~~~~~~~~~~~~~~~~

baidu_35975930
baidu_35975930   2017.09.10 21:48

报名

第一个div
第二个div

function btn1(){
document.getElementById('div1').style.display='block';
}
function btn2(){
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='block';
}
function btn3(){
document.getElementById('div2').style.display='none';

}

sunny_desmond
sunny_desmond   2017.09.11 09:29

jq的话 你可以试一下toggle,看看这个文章 你可以toggle一个class ,这样应该很容易实现~

Csdn user default icon
上传中...
上传图片
插入图片