首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何显示选中的div和隐藏其他兄弟div?

要实现选中的div显示并隐藏其他兄弟div,可以通过以下几种方法来实现:

  1. 使用JavaScript:
    • 首先,给每个div设置一个共同的类名,例如"target-div"。
    • 在JavaScript中,通过获取所有拥有该类名的div元素。
    • 遍历所有的div元素,并判断当前元素是否为选中的div。
    • 如果是选中的div,则将其显示,否则将其隐藏。
    • 示例代码:
    • 示例代码:
  • 使用jQuery:
    • 首先,给每个div设置一个共同的类名,例如"target-div"。
    • 在jQuery中,通过选择器选择所有拥有该类名的div元素。
    • 使用jQuery的each()方法遍历所有的div元素,并判断当前元素是否为选中的div。
    • 如果是选中的div,则使用show()方法显示该div,否则使用hide()方法隐藏该div。
    • 示例代码:
    • 示例代码:
  • 使用CSS:
    • 首先,给每个div设置一个共同的类名,例如"target-div"。
    • 在CSS中,使用该类名选择器选中所有的div元素。
    • 设置默认样式为隐藏,例如display: none;。
    • 为选中的div添加一个特定的类名,例如"selected-div"。
    • 使用该特定类名选择器选择选中的div。
    • 设置选中的div的样式为显示,例如display: block;。
    • 示例代码:
    • 示例代码:

以上是实现选中的div显示并隐藏其他兄弟div的几种方法,可以根据具体需求选择适合的方法来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 从零开始学 Web 之 jQuery(二)获取操作元素属性

    8、兄弟选择器 语法:$("div~span") 选择div 后面的所有兄弟标签为 span 标签。...9、直接兄弟选择器 语法:$("div+span") 选择div 后面的直接兄弟标签,如果这个直接兄弟为 span 标签则选中,如果为其他标签则不选中。...> 1、jQuery中鼠标进入事件是:mouseenter;鼠标离开事件是:mouseleave 2、css 中 display:none|block 对应隐藏显示在...表示显示隐藏动画效果。 4、stop 方法表示在显示隐藏之前先清除之前动画效果,防止鼠标操作过快,动画显示跟不上操作。 10、过滤选择器 这类选择器都带有冒号。...2、:eq() 选择器:匹配一个给定索引值元素。 3、.hide() 隐藏一个元素; .show() 显示一个元素。

    1.8K40

    JavaWeb18-jquery学习笔记(Java全栈开发)

    [start,end) map(fn):将一组元素转换成其他数组 过滤: eq(index):索引等于 获取指定索引元素.如果是正数,索引从0开始;若是负数,倒着数从1开始....:从下一个兄弟开始,直到指定元素结束 parent():获取父元素 parents():匹配元素祖先元素元素(不包含根元素) prev():上一个兄弟 prevAll():前面的所有兄弟 prevUntil...show(速度,[fn]) 显示显示成功后触发fn hide() 隐藏 toggle(speed [,fn]) 切换,如果隐藏显示,如果显示隐藏。...滑动:改变高度 slideDown ,显示(从上往下) slideUp,隐藏(从下往上) slideToggle() 切换 淡入淡出:改变透明度 fadeIn 显示 fadeOut 隐藏 fadeToggle...切换 fadeTo 指定对象透明度 效果: 基本:宽和高都变 show([毫秒值],[fn]) 展示 hide([毫秒值],[fn]) 隐藏 toggle([毫秒值],[fn]) 切换显示效果 若显示隐藏

    6.8K90

    如何使用纯 CSS 制作四子连珠游戏

    当其中任何一个被选中之后,应该把它隐藏起来,避免出现两者都被选中状态。...这些 checkbox 是直接兄弟类,所以如果选中第一个之后,可以使用 :checked 伪类相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢?你可以隐藏第二个,但是怎么才能影响第一个呢?...如上所述,计数器只能显示在 ::before ::after 伪元素中。这是显而易见,但它们如何影响其他元素呢?至少计数器值可以改变伪元素宽度。不同数有不同宽度。...我需要容器宽度在初始大小(=w)与至少两倍以上大小(>=2w)之间交替变换,以便能够完全隐藏显示黄色按钮。...当游戏板被填满时会显示平局信息。 检测平局结果出现了一个 bug。在极少数情况下会出现黄色玩家最终胜利情况,胜利和平局消息都显示出来了。这是因为这些结果检测显示方法是正交

    2K20

    Web阶段:第五章:JQuery库

    prop方法只推荐用来操作dom属性中值是truefalse属性。其他属性都使用attr方法。 attr还有它强大地方。它可以操作非标准属性(自定义属性)。...,隐藏状态就显示 第一个参数是 动画执行时候,(单位是毫秒) 第二个参数是 动画执行完成时回调函数 淡入淡出动画 fadeIn() 淡入 让隐藏可见 fadeOut() 淡出 让可见消失 fadeTo...jquery动画定义了很多种动画效果,可以很方便使用这些动画效果 练习:CSS_动画 品牌展示 需求: 1.点击按钮时候,隐藏显示卡西欧之后品牌...2.当显示全部内容时候,按钮文本为“显示精简品牌” 然后,小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌时候,要隐藏卡西欧之后品牌,按钮文本为“显示全部品牌” 然后小三形向下。...if ($("li:gt(5):not(:last)").is(":hidden")) { // 如果品牌隐藏了,要显示显示全部品牌】 $("

    26.2K20

    day41_jQuery学习笔记_02

    // 2、分组可以点击,控制其列表项显示隐藏             // 3、当前分组列表项显示时,其他分组列表项要隐藏             $("div...);                 // 4、如何调整显示位置(相对鼠标的坐标值:e.pageXe.pageY)                 $("#tooltip").css({                     ...|动画 8.1、基本效果|动画 详解如下: 作用:通过改变元素  高度宽度  进行显示隐藏 show(speed, fn)     显示     参数1:speed 速度。...hide(speed, fn)     隐藏 toggle(speed, fn)   切换 8.2、滑动效果|动画 详解如下: 通过改变元素  高度  进行显示隐藏 slideDown(speed..., fn)    显示 slideUp(speed, fn)      隐藏 slideToggle(speed, fn)  切换 8.3、淡入淡出效果|动画 详解如下: 通过改变元素  透明度  进行显示隐藏

    3.9K20

    前端成神之路-WebAPIs02

    如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先干掉其他人,...全选取消全选做法: 让下面所有复选框checked属性(选中状态) 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById...// 干掉所有人 让其余item 这些div 隐藏 for (var i = 0; i < items.length; i++) {...实际开发中,firstChild lastChild 包含其他节点,操作不方便,而 firstElementChild lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢...兄弟节点 下一个兄弟节点 上一个兄弟节点 我是div 我是span var div = document.querySelector

    73510

    与Ajax同样重要jQuery(1)

    pre元素后一个兄弟元素 $("label + input") prev ~ siblings 获取pre元素后边所有兄弟元素 $("form ~ input") 练习2: ² 将class属性值为...$(":header").css("color","gray"); // 设置页面中正在执行动画效果div背景黄色,不执行动画div背景绿色 // 无法选中正在执行动画元素 $("div:not(:...这个动画效果只调整元素高度,可以使匹配元素以“滑动”方式显示出来。在jQuery 1.3中,上下paddingmargin也会有动画,效果更流畅。...$("div:has(p)").addClass("test"); 含有p子元素div :parent 选取含有子元素或文本节点元素 $("td:parent") 所有不为空td元素选中 练习4:...: ² 为表单中所有隐藏域 添加 class属性,值为itcast ² 设置table所有 可见 tr 背景色 黄色 ² 设置table所有 隐藏tr 字体颜色为红色,显示出来 ,并输出tr中文本值 <

    10K60

    Web前端基础(07)

    ###属性选择器 $(“div[id]”) 匹配包含id属性div $(“div[属性名=‘xxx’]” 匹配指定属性名=xxxdiv $(“div[属性名!=‘xxx’]”)匹配指定属性名!...$(":radio") 匹配所有单选 $(":checkbox") 匹配所有多选 $(":checked") 匹配所有选中单选/多选/下拉选 $(“input:checked”) 匹配所有选中单选多选...$(":selected") 匹配所有选中下拉选 ###修改页面元素相关 创建及添加元素 创建: var d = $("abc"); 后面添加: 父元素.append...(d); 前面添加: 父元素.prepend(d); 插入元素前面: 兄弟元素.before(d); 插入元素后面: 兄弟元素.after(d); 删除元素: 元素对象.remove(); 获取修改元素文本内容...(); //得到其他两个li里面的ul并且设置隐藏 $(this).siblings().children().hide(); }) </

    5K20

    CSS3学习(一)——基础学习

    兄弟元素:拥有相同父元素元素是兄弟元素 1.2.3.1 子类选择器 子元素选择器 作用:选中指定父元素指定子元 语法:父元素>子元素 <!...:hover 可以绑定其他元素 如div ul nav啥  作用:用来表示鼠标移入状态 :active  作用:用来表示鼠标点击 1.2.4 伪类选择器 伪元素:表示页面中一些特殊并不真实存在元素...margin也可以设置负值,如果是负值则元素会向相反方向移动,元素在页面中是按照自左向右顺序排列,所以默认情况下如果我们设置上外边距则会移动元素自身,而设置下右外边距会移动其他元素。...(可以-x或-y) 属性来设置父元素如何处理溢出子元素  可选值:   visible:默认值子元素会从父元素中溢出,在父元素外部位置显示   hidden:溢出内容将会被裁剪不会显示   ...:将元素设置为一个表格  none:元素不在页面中显示 visibflity:  用来设置元素显示状态 可选值:  visible:默认值,元素在页面中正常显示  hidden:元素在页面中隐藏显示

    73820
    领券