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 谢啦
10 个月之前 回复
zhwyj1019
zhwyj1019 希望对你有帮助。
11 个月之前 回复
zhwyj1019
zhwyj1019 回复zhwyj1019: 把slideToggle();里面的参数设为0就没有动画效果了slideToggle(0);里面的参数是毫秒值。
11 个月之前 回复
zhwyj1019
zhwyj1019 回复zhwyj1019: 效果。。。。
11 个月之前 回复
zhwyj1019
zhwyj1019 需要其他的小狗去查JQ的文档,还有几种别的效果
11 个月之前 回复
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   Rxr 2017.09.11 09:29

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
JavaScript点击超链接右边显示一个小图标(标记)案例
点击菜单里的超链接,右边显示一个图标、标记。
怎样用jquery实现点击一个按钮控制一个div的显示和隐藏
页面代码: 商品列表 西红柿炒蛋 鸡蛋 x1 番茄 x2 辣椒炒肉 辣椒 x1 肉 x2 Jquery代码 方法一: $(function(){ $(".list-item input").cli
Jquery实现从一个页面跳转到另一页面
从一个页面跳转到另外一个页面我们可以很容易的使用Javascript来实现。但是,这里我们使用Javascript的框架Jquery来实现Jquery页面跳转。比如想跳到 mao.aspx 这个页面的div id="s" 的位置。那么,只用 就可实现跳转到指定位置。 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数
js/jq 点击按钮显示div,点击页面其他任何地方隐藏div
js和jq两种方法 点击按钮显示div,点击页面其他任何地方隐藏div
js实现点击div隐藏相应部分,再次点击显示
首先看一下html和css的结构:<style> #nav_left{ width:120px; height:600px; background-color:#333; margin-left:0px; } .list { color:#fff; padding:10px; font-size:18px; }.list:hover{
jQuery将DIV复制为另一个DIV 并且功能同在(delegate的用法)
&amp;lt;div id=&quot;copied&quot;&amp;gt; //此div为原先存在的div &amp;lt;div&amp;gt; &amp;lt;div class=&quot;table-H&quot; style=&quot;&quot;&amp;gt; &amp;lt;input type=&quot;text&quot; value=&quot;&quot;&amp;gt;&amp;lt;a href=&quot;javasc
点击按钮让整个div水平或垂直翻转
.animated_div { width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; padding:20px 10px 0px 10px; float:left; margin:20px; margin-right:50px; border:1px solid #888888
js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略!思路:         1.先将div设置为隐藏,style=”display:none”;         2.调用javascript脚本showContent()方法;         3.获取传入的id,document.getElementById();
使用jquery实现点击一个按钮或连接,让它下面的div显示,在点击一下隐藏
jquery代码: $(function(){ $("#a").click(function( e ){ e.preventDefault(); if ($("#test").is(":hidden") ){ $("#test").show("normal"); }else{ $("#test").hide("slow"); } }); }
实现鼠标放到一个div上显示出另一个隐藏的div
CSS Test Page *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200px; width:100px; } .cs{ width:1