开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery切换(单击以显示一个div而隐藏其他div)

切换效果可以通过jQuery来实现，具体步骤如下：

在HTML中添加多个div元素，每个元素代表一个需要切换的模块，例如：<div class="module">模块1</div> <div class="module">模块2</div> <div class="module">模块3</div>$('.module').click(function(){ $('.module').hide(); $(this).show(); });.module { display: none; } .module.active { display: block; }其中，.module为每个模块的类名，display: none为模块的初始状态，display: block为模块被点击后的状态。 4. 在上述代码中，我们使用了jQuery的show()和hide()方法，以及click()事件，实现了单击以显示一个模块而隐藏其他模块的效果。
使用jQuery的show()和hide()方法，分别为每个模块添加点击事件，当点击某个模块时，使用show()方法将其显示，使用hide()方法将其他模块隐藏：
在CSS中添加每个模块的样式，例如：

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery切换</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $('.module').click(function(){
                $('.module').hide();
                $(this).show();
            });
        });
    </script>
</head>
<body>
    <div class="module">模块1</div>
    <div class="module">模块2</div>
    <div class="module">模块3</div>
</body>
</html>

在这个代码中，我们使用了jQuery的click()方法，当用户点击某个模块时，该模块会显示出来，而其他模块会被隐藏。同时，我们还使用了CSS样式，使得每个模块在显示和隐藏时都有不同的样式。

切换效果实现的核心是jQuery的show()和hide()方法，这两个方法可以快速切换元素的可见状态。当点击某个模块时，我们使用show()方法将该模块显示出来，同时使用hide()方法将其他模块隐藏起来。这里我们使用$('.module').hide();将所有的模块隐藏起来，使用$(this).show();将当前模块显示出来。

切换效果可以通过jQuery的动画效果来实现，例如使用slideDown()、slideUp()、fadeIn()、fadeOut()等方法，使得模块切换时具有渐隐渐现的效果，从而提高用户体验。

相关搜索:AngularJS:单击按钮即可显示其他div和隐藏当前div Div在单击时淡出并显示其他div Jquery - 显示/隐藏/切换多个DIV jQuery onclick显示/隐藏多个div -隐藏额外的div jQuery切换()，按钮我想单击一个按钮并隐藏所有其他div Jquery显示/隐藏切换Div选定项 jquery显示隐藏div jquery点击div显示隐藏使用javascript切换with div。开始隐藏，单击以显示切换div的类以根据所单击的按钮显示/隐藏内容

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JQuery 操作CSS使DIV显示或者隐藏

在某些需求中，你需要点击按钮显示某个div，并隐藏已经显示的按钮。同时点击另外一个按钮，又会隐藏已经显示的，并显示已经影藏的。

4K1 0

jquery 默认隐藏div,点击按钮显示，再次点击隐藏

html 代码： 22222222 jquery 代码

8.8K3 0

vue项目中div切换显示与隐藏状态时的动画效果

// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行 // el:指的是当前调用这个方法的元素对象 // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before...el.offsetHeight; el.style = "padding-left: 0px"; //done(); }, //用不到可以不写 afterEnter: function (el) {}, //显示到隐藏

3.7K1 0

【jQuery动画】显示与隐藏效果

显示被隐藏的匹配元素 hide([speed,[easing],[fn]]) 隐藏已显示的匹配元素 toggle([speed],[easing],[fn]) 元素显示与隐藏切换 speed：动画的速度...实现效果当点击“显示”，则div中的内容会显示，并弹出提示框，点击“隐藏”则隐藏内容，弹出提示框，点击“切换”，则会在二者之间切换。...HTML、CSS部分思路： 1、定义显示、隐藏、切换三个功能按钮，定义div元素； 2、设置div元素的样式，宽度、高度和背景颜色。...jQuery代码，如果在文档没有完全加载之前就运行函数，操作可能失败； 3、给三个按钮添加点击事件，这里用到筛选选择器eq； 4、实现单击显示按钮，控制div元素的显示（show），并弹出提示框（alert...）； 5、实现单击隐藏按钮，控制div元素的隐藏（hide），并弹出提示框； 6、实现单击切换按钮，控制元素显示与隐藏切换（toggle）。

6.7K1 0

一文深入JQuery

文章目录动画三种方式显示和隐藏元素默认显示和隐藏方式滑动显示和隐藏方式淡入淡出显示和隐藏方式遍历 js的遍历方式 jq的遍历方式 jq对象.each(callback) $.each...(object, [callback]) for..of: jquery 3.0 版本之后提供的方式事件绑定 jquery标准的绑定方式 on绑定事件/off解除绑定事件切换：toggle 案例...广告显示和隐藏抽奖插件：增强JQuery的功能实现方式：动画三种方式显示和隐藏元素默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数： speed：动画的速度...分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组，存放图片资源路径 * 生成随机数。数组索引 2.

3.3K3 0

Web前端知识(四)

4.自定义动画 4.1.9.3.jq的显示与隐藏动画 hide()方法隐藏元素格式:hide(speed,callback)方法参数: speed,动画执行的速度要求传入一个毫秒值. 1秒等于...代码实战: 切换显示隐藏我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。...而 jQuery 提供给我们一个类似功能的独立方法: toggle() 方法用来切换显示隐藏代码实战: $("button").eq(2).click(function () { $("div...").toggle(1000);}); 【隐藏和显示以及切换动画总结】: Ø注意:在无参数的时候,只是硬性的显示内容和隐藏内容。...而 jQuery 为了解决这个问题提供了 .fadeTo()方法注意:淡入、淡出效果和显示、隐藏效果一样,具有相同的参数。

7.4K3 0

JQuery高级应用

动画三种方式显示和隐藏元素默认显示和隐藏方式 show([speed,[easing],[fn]]) ：显示参数： speed：动画的速度。...hide([speed,[easing],[fn]]) ：隐藏 toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示 <div id="showDiv" style...alert("隐藏了...") }); //自动切换 $("#showDiv").toggle("slow"); 滑动显示和隐藏方式 slideDown([speed],[easing],[fn])... 案例广告自动显示和隐藏 <!

5.9K3 0

JQuery 笔记（二）

JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1....事件切换：toggle * jq对象.toggle(fn1,fn2...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2........广告显示和隐藏 <!...分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性

3.1K1 0

前端基础-JQuery (二)

三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。...事件切换：toggle * jq对象.toggle(fn1,fn2...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2........广告显示和隐藏 <!...分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性

2.4K1 0

JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

1 JQuery动画 JQuery有三种方式显示和隐藏元素： 1）默认显示和隐藏方式： --show([speed, [easing], [fn]]) --hide([speed.../js/jquery-3.3.1.min.js"> //隐藏div function hideFn(){ /*...slideDown("slow");*/ //淡入淡出方式 $("#showDiv").fadeIn("slow"); } //切换显示和隐藏..." value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> div显示和隐藏 ?

9.4K2 0

第51次文章：JQuery高级

JQuery 高级一、动画 1、三种默认方式显示和隐藏元素 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,...当单击jq对象对应的组件后，会执行fn1，第二次单击会执行fn2..... 【注意】1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。...setTimeout（执行一次定时器）分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值使用 show/hide方法来完成广告的显示（3）代码实现 <!...获取广告div，调用显示方法 $("#ad").fadeIn("slow"); } //隐藏广告 function adHide...（2）分析给开始按钮绑定单击事件定义循环定时器切换小相框的src属性。首先定义数组，存放图片资源路径，然后生成随机数，作为数组索引。 2.

3.6K3 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

事件,而不触发和元素上的 click事件.当单击元素时,只触发元素上的click事件, 而不触发元素上的click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。...，fn) 显示当显示成功后触发fn hide()隐藏 toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...，可以使匹配的元素以“滑动”的方式隐藏或显示  滑动：改变高度 slideDown，显示（从上往下） slideUp，隐藏（从下往上） slideToggle()切换 ——

8.2K2 0

jQuery的简单使用

通过jQuery注册事件 jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。...控制标签通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签： <!...jQuery的显示/隐藏效果 show方法可以显示某个组件，hide方法则可以隐藏某个组件： <!...，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数：隐藏显示/隐藏

7K1 0

JQuery最全常用方法指南

Effects 方法说明 show() 显示隐藏的匹配元素。...show(speed, [callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 hide() 隐藏所有的匹配元素。...hide(speed, [callback]) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数 toggle() 切换元素的可见状态。...如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。...对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个元素的内容。

11K3 1

JQuery的学习

* jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。...slow"); //淡入淡出： $("#showDiv").fadeIn("show"); } //切换显示和隐藏...事件切换：toggle * jq对象.toggle(fn1,fn2...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2........广告显示和隐藏： <!...分析发现JQuery的显示和隐藏动画效果其实就是控制display 3.

16.6K2 0

HTML5+CSS3+JavaScript从入门到精通-21

"> 21-05 显示、隐藏和切换动画效果 <!...-- hide \ show \ toggle(若是隐藏，变成显示；若是显示，变成隐藏；toggle就是改变现在的状态) (speed, callback) -- speed,速度，毫秒...callback，动画执行后的回调函数，可省略 --> 显示、隐藏和切换动画效果...、隐藏和切换动画效果 jQuery是一个快速和简洁的Javascript框架库，可简化HTML文档元素的遍历，事件处理，动画和Ajax交互以实现快速Web开发，它被设计用来改变编写Javascript

3K1 0

Jump Start Bootstrap 第4章

Bootstrap为下拉插件提供了一些附加事件,它们是： show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单； shown.bs.dropdown: 这个事件在菜单被显示时触发...当你点击按钮时，你会看到一个类似于插图效果的样式;在再次单击时，它返回到原来的样式，如图所示。data-toggle=”button”实现了这个切换功能。 ?...包裹体可以有三个类panel-collapse、collapse和in；类collapse用来折叠和隐藏面板中panel-body的内容，而in显示这些内容。...因此，第一个包裹体同时拥有collapse和in来显示完整的内容，其他包裹体内只应该包含collapse。...show属性用于通过JavaScript切换模式的可见性。当设置为true时，模式对话框将自动显示，不需要单击任何句柄元素。

28.3K4 0

JavaWeb18-jquery学习笔记（Java全栈开发）

[start,end) map(fn):将一组元素转换成其他数组过滤: eq(index):索引等于获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始....当显示成功后触发fn hide() 隐藏 toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...滑动：改变高度 slideDown ，显示（从上往下） slideUp，隐藏（从下往上） slideToggle() 切换淡入淡出：改变透明度 fadeIn 显示 fadeOut 隐藏 fadeToggle...切换 fadeTo 指定对象透明度效果: 基本:宽和高都变 show([毫秒值],[fn]) 展示 hide([毫秒值],[fn]) 隐藏 toggle([毫秒值],[fn]) 切换显示效果若显示则隐藏...若隐藏则显示滑入滑出:高 slideDown([毫秒值],[fn]):从上到下滑入 slideUp([毫秒值],[fn]):从下到上滑出 slideToggle([毫秒值],[fn]):切换若有则滑出

6.8K9 0

Web阶段：第五章：JQuery库

Jquery 的初体验需求：使用Jquery和javascript给一个按钮绑定单击事件注意：使用Jquery之前要将第三方jar包导入 Jquery动画基本动画 show() 显示隐藏的元素第一个参数是动画执行的时候...，隐藏状态就显示第一个参数是动画执行的时候，（单位是毫秒）第二个参数是动画执行完成时的回调函数淡入淡出动画 fadeIn() 淡入让隐藏可见 fadeOut() 淡出让可见消失 fadeTo...td> 显示/隐藏切换 toggle()...而jquery的页面加载完成之后，会把所有注册了函数都按照注册的顺序，依次全部执行。事件 **click()** 绑定单击事件。触发单击事件 **mouseover()** 绑定鼠标移入事件。

26.2K2 0

jQuery 入门指南教程

： $(this).hide() - 隐藏当前元素 $('p').hide() - 隐藏所有段落 $('p.test').hide() - 隐藏所有 class="test" 的段落 $('#test'...jQuery的基本设计和主要用法，就是”选择某个网页元素，然后对其进行某种操作”。这是它区别于其他函数库的根本特点。...对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jQuery对象，而get(n)和索引返回的是dom元素对象。...对于jQuery对象只能使用jQuery的方法，而dom对象只能使用dom的方法，如要获取第三个元素的内容。...jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： $('div').find('h3').eq(2).html('Hello'); 分解开来，就是下面这样： $('div') // 找到

1.2K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭