点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏

vue:动态组件——实现当点击一个按钮时,显示相应的div,并将其他div都隐藏起来 乐多_通过动态组件 () 来实现当点击一个按钮时,它将显示相应的,并将其他都隐藏起来。 阅读详情
<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />
                            <div id="pop" class="centerDiv radius" style="width: 260px; height: 100px; border:1px solid #ddd; background:#f7f7f7; color:#000;">
                                当点击按钮后显示隐藏层,满足鼠标在div里操作不隐藏,在外边点击会消失的功能。
                                逻辑上主要是阻止浏览器的冒泡<br />

                            </div>


<script type="text/javascript">
       
        //点击#btnClick时要阻止冒泡,否则.pop是不显示的,
        //因为冒泡了,会执行到下面的方法。
        function stopPropagation(e) {
            var ev = e || window.event;
            if (ev.stopPropagation) {
                ev.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;//兼容IE
            }
        }
        $("#btnClick").click(function (e) {
            $("#pop").show();
            stopPropagation(e);
        });
        $(document).bind('click', function () {
            $("#pop").hide();
        });
        $("#pop").click(function (e) {
            stopPropagation(e);
        });
    </script>

鼠标点击一个div,另一个div变色.html jquery/js实现鼠标点击一个div,另一个div变色demo 立即下载

相关推荐

基于CANoe的Basic Diagnostics ECU (UDS)

基于CANoe的Basic Diagnostics ECU (UDS)

farmer00的博客 9153

js实现点击div之外区域,隐藏div

之前在学习的时候,发现别人用了这个contains属性,感觉还是很好用的,记录一下,以免忘记。在监听事件中,判断左侧盒子不包含点击的位置时,则关闭左侧盒子。js 判断是否包含某个DOM元素使用contains。点击左侧弹框之外的区域,会将左侧弹框关闭。

weixin_43239880的博客 3556

SAR成像处理基本知识2——图像尺寸与回波尺寸的关系

阅读本文前,请先了解上一篇文章(SAR成像处理基本知识1——常用专用名词解释) 1. SAR图像尺寸预估方法 以C波段2m@20km的SAR图像为例,假设天线中心下视角为35° ,说明图像尺寸的估计方法。 1.1 距离向尺寸估计 地距分辨率为2m时,距离向分辨率约为1.15m,则要求信号带宽不小于130MHz,假设信号带宽为150MHz,采样率为180MHz,那么距离向分辨单元为0.833m。 地距幅宽为20km时,距离向幅宽约为20*sind(3...

爱学习的小伟的博客 4954

点击元素(div等)外,使元素隐藏的两种方法

实现点击div元素之外 隐藏div 需求 需要使用元素失焦方法,但是div没有失去焦点的方法 给div元素添加tabIndex属性 <template> <div tabIndex="0" @blur="divBlur" v-show="activeId === '1'">1234</div> </template> <script setup> import { ref } from "vue"; function divBlur(){

m0_52948787的博客 4579

大数据实战:Python与MySQL在足球赔率分析中的高效应用

本文详细介绍了如何利用Python与MySQL进行大数据实战,实现足球赔率的高效分析。通过对比Excel处理的局限性,阐述了数据库在处理百万级数据时的速度优势。文章提供了从环境搭建、使用pymysql连接数据库、利用pandas进行数据清洗与分析,到构建自动化分析系统的完整流程,旨在帮助读者将大数据技术应用于实际业务场景,显著提升数据处理与洞察效率。

weixin_29080843的博客 447

ThingsBoard教程(十九):规则节点概览介绍

在ThingsBoard的CE V2.5.6版本中,一共有这几种类型在每一种类都有包含了多个节点,每一种类型的节点都有不同的颜色表示本篇文章做一个简单的概括,后续的文章会详细讲解每一个种类的节点如何使用,每一个节点的使用。一共有10个,使用黄色表示 过滤器节点用于消息过滤和路由。一共有9个,使用绿色 属性节点用于更新传入消息的元数据。一共三个,使用蓝色 转换节点用于更改传入消息字段,如发起者、消息类型、有效负载和元数据。一共21个,使用红色标识 动作节点根据传入的消息执行各种动作。一共9个,使用黄色表示,

知无涯 1万+

点击链接/按钮显示div区域,点击其他区域再隐藏之前显示的div

情形: 页面上有一个链接(也可以写成按钮),当点击该链接时,显示出一个div框,框内的内容自定义 代码: 页面上的两个控件,div的样式可以自定义进行修改: <a id="myA" href="#" onclick="showDiv()">显示div</a> <div id="myDiv" style="display: none; background-c...

Pei71320的博客 1133

Testbench编写:激励生成、响应监控、仿真时间控制

本文介绍了Verilog/VHDL Testbench的核心技术,重点阐述了激励生成、响应监控和仿真时间控制三大关键环节。通过时钟生成、复位信号生成等具体代码示例,展示了如何有效构建测试平台。文章还总结了波形输出、自动检查等验证方法,并提出了模块化设计、自动化检查等最佳实践,帮助开发者提升FPGA仿真效率和验证质量。这些技术要点为数字电路设计的正确性验证提供了系统化的解决方案。

2301_79143213的博客 111

对于指定区块div,如何区分区块内的点击 和 区块外的点击?

  需求:对于区块div内点击事件, 需要展示区块内的附属操作区块,对于区块外的点击, 需要将前面说的附属操作区块隐藏掉。    分析:对于一般的HTML控件,有标准的js事件接口, focus和blur,来实现类似效果, 在focus中添加显示附属控件操作, 在blur中隐藏掉。例如 文本输入框, 和 image 类型的input, 但是对于设计出的样式不能通过这类控件来表达时候,就需要使用d...

weixin_34175509的博客 179

20251121更新纷玩岛

【代码】20251121更新纷玩岛。

猫敷雪 1019

使用Matlab实现海洋监视雷达检测仿真

海洋监视雷达是一项重要的海洋探测技术,可以用于海上船只、飞机、潜艇等目标的探测和监视,具有广泛的应用价值。本篇文章将介绍如何使用Matlab进行海洋监视雷达的检测仿真,并提供相应的源代码。本篇文章提供了利用Matlab进行海洋监视雷达检测仿真的基本思路和代码实现。读者可以根据自己的需求进行修改和优化,以适应不同的应用场景。使用Matlab实现海洋监视雷达检测仿真。

2301_78484069的博客 448

点击按钮显示一个div,div之外的地方隐藏,之内的地方不隐藏

  &lt;body&gt; &lt;input id="btnClick" type="button" value="原生写法" class="btn-green radius" /&gt; &lt;div id="pop" class="centerDiv radius" style="width: 260px; h

木子小姐 1115

STEP 7-Micro/WIN SMART 编程软件:从入门到精通的使用指南

通过不断实践,熟悉软件的各项功能和操作技巧,工程师可更好地应对工业自动化控制中的各种挑战,开发出高效、稳定的控制程序。项目的基本组件是构成程序的核心元素,包括:程序块(主程序 OB1、子程序和中断程序)、数据块(给 V 存储器赋初值)、系统块(硬件组态和参数设置)、符号表(用符号代替存储器地址,使程序更易理解)以及状态图表(监视、修改和强制变量状态)。下载程序时,单击工具栏上的 “下载” 按钮,在弹出的下载对话框中选择要下载的块(程序块、数据块、系统块),单击 “下载” 即可。

电工 5573

JS实现点击一个按钮隐藏和显示div

简单JS基础入门时的demo

喜欢做一些demo,和分享遇到的 BUG 1万+

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

JavaScript点击按钮隐藏和显示div方法

根据id 按钮获取点击事件,添加事件处理函数 效果: &lt;style&gt; #dv{ width: 100px; height: 100px; background-color: royalblue; } &lt;/style&gt; &lt;body&gt; &lt;input type="button" value="隐藏" id="btn"/&

u014414110的博客 2万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

js点击按钮div显示隐藏

<input type="button" value="隐藏" id="btn"> <div id="box"></div> #box { width: 200px; height: 200px; background-color: red; } .show { display: block; } .hidden { display: none; } // 获取元素 var btn = document.getElementById('btn'); var

u010234868的专栏 8139

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

JS 点击按钮显示和隐藏div

CSS代码部分: &lt;style&gt; div { width: 300px; height: 200px; background-color: yellow; border: 2px solid red; } .cls { display: none; } &lt;/style&gt; ...

夏沐的博客 1万+

实现点击按钮显示一个div,页面上其他的内容全部隐藏。再点击返回按钮,div隐藏,页面上所有的内容再显示出来

话不多说,直接撸代码吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .div { display:no...

涵山韵海的博客 2044

js-点击div之外,隐藏div

其实原理总结就两句话: 给整个document添加监听点击事件,隐藏div 给div添加监听点击事件,阻止冒泡 代码实现 html代码 <body> <!-- 要隐藏的div --> <div id="showDiv"></div> </body> js代码 const bt = document.getElementById('showButton'); const div = document.getElementById('sh

前端蜗牛君 5679

js点击元素之外的地方隐藏该元素

有时候我们会有这种情况,点击按钮(或者指定元素)显示一个菜单栏,点击按钮和菜单栏外的区域隐藏菜单栏; 主要运用阻止事件冒泡来实现;下面是全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con...

大湿胸的博客 5235

Bootstrap—点击按钮控制div隐藏和显示的切换(图文详情)

Bootstrap—点击按钮控制div隐藏和显示的切换 第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和false来回切换 <li class="dropdown" :class="{open: toggle}"> // open动态获取toggle到底是true还是false ...

Poppy_LYT的博客 9210
上一篇: js截取文件上传的文件名称
下一篇: 将字符串修改成数组,变成坐标
信念堤岸
博客等级 码龄13年 40粉丝 44原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值