封装函数一（按下高亮松开恢复）

最新推荐文章于 2022-03-01 17:35:30 发布
最新推荐文章于 2022-03-01 17:35:30 发布
阅读量86 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706619/article/details/99977663
版权

封装函数一（按下高亮松开恢复）
在这里插入图片描述
function changeColor(dom){
dom.onmousedown = function(){
dom.style.backgroundColor = ‘orange’;
}
dom.onmouseup = function(){
dom.style.backgroundColor = ‘white’;
}
}

_小郑有点困了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QListView 实现model
01-15
Qt 视图模型
在view上画一个button，自定义其按下和松开后的样式
哈哈__哈哈的专栏
07-13 182
button选custom 然后在viewDidLoad()中：       //普通状态下： UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"]; UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableI...
实现ImageView按下变暗，抬起变亮。
zhuhai__yizhi的专栏
12-02 1871
直接上代码package com.test.app; import android.app.Activity; import android.graphics.Color; import android.view.MotionEvent; import android.view.View; import android.view.View.OnClickListener; import andr
Jquery 点击按钮自动高亮实现原理及代码
10-26
在添加了"hover"属性之后，我们通过另一个setTimeout函数设置第二个定时器，延迟200毫秒执行一个函数，在这个函数中我们通过clearTimeout取消之前的定时器，然后再设置一个定时器，延迟100毫秒后将"hover"属性移除。...
notepad下的lua的函数列表和语法高亮的资源
01-29
针对"notepad下的lua的函数列表和语法高亮的资源"这一主题，我们将深入探讨如何在Notepad++中设置Lua语言的支持，实现函数列表、语法高亮和代码自动补全功能。 首先，我们需要了解Lua，它是一种轻量级的脚本语言，...
php实现简单的语法高亮函数实例分析
10-24
本文详细分析了一个示例函数syntax_highlight($code)，其通过正则表达式高亮了字符串、函数、注释、花括号、变量以及特定的关键字等语法元素。 首先，函数通过正则表达式匹配双引号内的字符串，将它们放在带有指定...
vue实现吸顶、锚点和滚动高亮按钮效果
10-16
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中实现吸顶、锚点和滚动高亮按钮效果，能够提升用户体验，尤其是在内容丰富的页面中。以下将详细介绍这三种效果的实现方式。 1. **吸顶效果**： 吸顶效果...
封装高亮显示函数
a88480的博客
10-23 149
在实际的需求中，经常会对某些内容进行高亮处理，比如说搜索结果的高亮显示，尤其是处理某些富文本时。在这里对关键词做一个高亮显示的封装，以后难免还会遇到。 搜索结果的高亮显示 // 高亮显示 function highLight(text) { // 正则表达式 需要被替换的数据是一个变量时声明正则表达式对象 const reg = new RegExp(text, 'gi') const highStr = `<span clas
js图片url反转file文件
_小郑有点困了的博客
03-01 4816
场景 由于项目需求，需要将图片 url 转成文件格式上传到服务器 封装js transferFile.js function setInitImg(url,callback){ let img = url;//这里是淘宝上随便找的一张图片 let _ = this let imgRes getBase64(img, (dataURL) => { imgRes = dataURLtoFile(dataURL,img); console.log(imgRes)
点击一个按钮，让输入框获取焦点
_小郑有点困了的博客
08-01 4360
点击一个按钮，让输入框获取焦点 只需设置一个属性：
前端vue导出Excel（多sheet）
_小郑有点困了的博客
01-13 4242
场景： 当导出文件的时候遇到结构复杂的表格（如：表头合并）；或者数据分页的时候，后端就很难操作了，难以保持表格原有结构。所以就需要前端导出。 步骤如下： 1.组装数据 2.标记表头合并项，计算合并项 3.添加样式 4.转buffer，file-saver导出文件 组装数据 所谓组装数据的意义在于，手动决定他的结构 举个例子 表格外观是这样的 打印一下导出的数据结构是这样的 分别查看 这个!cols数组是每一列的宽度（第一行每一格的宽度） 这个!merges是表格所有的合并项 自行组装
正则校验密码格式（四选四/四选三/四选二）
_小郑有点困了的博客
12-14 3616
四选四 let reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9_!@#$%^&*()+.]+$)(?![A-Za-z_!@#$%^&*()+.]+$)(?![A-Z0-9_!@#$%^&*()+.]+$)[a-zA-Z0-9_!@#$%^&*()+.]{8,}$/; if (!reg.test(this.changepassword)) { this.$Modal.error({ content: `添加失败，密码要求包含大写、小写字母，数
vue使用openlayers描边中国地图
_小郑有点困了的博客
03-31 1840
vue使用openlayers描边中国地图 效果图： 数据源来自：http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5 china.json: 代码 index.vue: <template> <div id="app"> <div id="Map" ref="map"></div&gt
vue使用阿里云ARMS前端监控
_小郑有点困了的博客
03-31 1749
vue使用阿里云ARMS前端监控 其实使用方法也很简单。cdn的方式就是h5一样，在index.html的body的第一行中引入script（同步异步任选）。 <script> !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxxx",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,enableLinkTrace:tr
原生H5封装并使用vue的相关命令（v-for v-if v-html）
_小郑有点困了的博客
03-29 1634
原生H5封装并使用vue的相关命令 场景：当你使用vue开发习惯了的时候，再写原生html和js是不是有点感觉麻烦，不能响应式，而且循环个页面的数据还要用字符串拼接，于是乎就自己把这些常用的命令封装起来。有“v-for/v-if/v-html”等等。 注：“v-for”在循环元素上面还存在一点bug 效果图： index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8
用js封装函数写一个Tab切换
最新发布
08-13
### 回答1： 很高兴为您解答。这个需要一些JavaScript知识，但是我们可以简单地使用以下代码来实现：<script>function toggleTab(tabName){ var tabs = document.querySelectorAll('.tab'); tabs.forEach(function(tab){ tab.classList.remove('active'); if (tab.dataset.tab === tabName){ tab.classList.add('active'); } }); }</script> ### 回答2： Tab切换是一种常见的网页交互效果，可以通过JavaScript封装一个Tab切换函数。以下是一个简单的实现： ```javascript function tabSwitch(tabId) { // 获取Tab切换容器 var container = document.getElementById(tabId); // 获取所有Tab标签和内容 var tabs = container.querySelectorAll('.tab'); var contents = container.querySelectorAll('.content'); // 遍历所有Tab标签 tabs.forEach(function(tab, index) { // 给Tab标签绑定点击事件 tab.addEventListener('click', function() { // 隐藏所有内容 contents.forEach(function(content) { content.style.display = 'none'; }); // 显示当前点击的标签对应的内容 contents[index].style.display = 'block'; // 切换选中的标签样式 tabs.forEach(function(t) { t.classList.remove('active'); }); tab.classList.add('active'); }); }); } ``` 使用该函数，只需要在HTML文档中添加相应的结构，并调用`tabSwitch`函数，例如： ```html <div id="tab-container"> <div class="tab active">Tab 1</div> <div class="tab">Tab 2</div> <div class="tab">Tab 3</div> <div class="content" style="display: block;">Content 1</div> <div class="content">Content 2</div> <div class="content">Content 3</div> </div> <script type="text/javascript"> tabSwitch('tab-container'); </script> ``` 这段代码会实现一个具有三个Tab标签和对应内容的切换效果。初始状态下，默认显示第一个Tab标签的内容。当点击其他Tab标签时，会切换显示相应的内容，并改变当前选中Tab标签的样式。 ### 回答3： 切换选项卡（Tab）是网页开发常用的功能之一，我们可以使用JavaScript封装一个Tab切换的函数。下面是一个简单的示例： HTML结构部分： ```html <div id="tabs"> <div class="tab" onclick="changeTab(0)">选项卡1</div> <div class="tab" onclick="changeTab(1)">选项卡2</div> <div class="tab" onclick="changeTab(2)">选项卡3</div> </div> <div id="contents"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> ``` CSS样式部分： ```css .tab { cursor: pointer; } .content { display: none; } ``` JavaScript部分： ```javascript function changeTab(index) { var tabs = document.getElementsByClassName("tab"); var contents = document.getElementsByClassName("content"); // 先隐藏所有内容 for (var i = 0; i < contents.length; i++) { contents[i].style.display = "none"; } // 显示选中的内容 contents[index].style.display = "block"; // 可以根据需要添加一些样式修改，比如高亮当前选中的选项卡 for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove("active"); } tabs[index].classList.add("active"); } ``` 以上代码使用了事件绑定，当点击选项卡时，会调用changeTab()函数，根据传入的索引值来控制显示和隐藏选项卡的内容。我们通过修改CSS的display属性来实现切换效果。 这个函数可以根据需要进行修改和扩展，比如可以自定义样式、添加动画效果等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值