tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>tab栏切换功能</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {min-height: 100vh;background: linear-gradient(45deg, #fbda61, #ff5acd);}#tab {width: 300px;height: 300px;margin: 80px auto;background-color: #fff;border-radius: 20px;box-sizing: 0 35px 88px rgb(0, 0, 0, 0, 15);}#title {width: 100%;height: 50px;display: flex;line-height: 50px;}#title div {width: 50%;height: 100%;text-align: center;}#title div:hover {cursor: pointer;color: #1b2d90;}#title_1 {border-top-left-radius: 20px;}#title_2 {border-top-right-radius: 20px;}.cs2 {background-color: #c655a8;color: aliceblue;}#tab_1 {padding: 30px;line-height: 30px;color: #070763;font-weight: bold;}</style></head><body><div id="tab"><div id="title"><div id="title_1">信息公告</div><div id="title_2" class="cs2">服务公告</div></div><div id="tab_1"><ul><li>图书每满100减50</li><li>精选童书每满100减50</li><li>悦小说文学每满100减50</li><li>科技好书每满100减50</li></ul></div></div><script>var title_1 = document.getElementById("title_1");var title_2 = document.getElementById("title_2");var tab_1 = document.getElementById('tab_1');var tab = document.getElementById('tab');//title_2 信息公告点击时title_2.onclick = function() {t2();}//title_1 服务公告点击时title_1.onclick = function() {t1();}//改变内容和样式 title_2function t2() {title_1.className = 'cs2';title_2.className = "";tab_1.innerHTML = `<ul><li>关于谨防诈骗的重要提示</li></ul>`;}//改变内容和样式 title_1function t1() {title_1.className = '';title_2.className = "cs2";tab_1.innerHTML = `<ul><li>图书每满100减50</li><li>精选童书每满100减50</li><li>悦小说文学每满100减50</li><li>科技好书每满100减50</li></ul>`;}var timin; //用来存放定时器的var bool = false; //来回切换样式function timing() {if (bool == false) {t1()bool = true;} else {t2();bool = false;}}//启动定时器 来回切换样式 3秒一次timin = setInterval('timing()', 3000);//当鼠标经过#tab 触发//mouseenter 当鼠标进入触发一次//mousemove 当鼠标经过触发就tab.onmouseenter = function() {//清除定时器clearInterval(timin);}//当鼠标指针离开 #tab 元素时//mouseleave  包括子标签//mouseout 不会包括子标签tab.onmouseleave = function() {//启动定时器timin = setInterval('timing()', 3000);}</script></body>
</html>

效果如下

tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换相关推荐

Foxmail新建自动标签功能在哪如何给Foxmail收件人邮件设置自动标签
Foxmail邮件客户端软件,是中国最著名的软件产品之一,在Foxmail里面有很多比较好的功能,比如自动标签,那么,Foxmail新建自动标签功能在哪?如何给Foxmail收件人邮件设置自动标签呢? ...
实现敌人（怪物）的简单AI（自动巡逻、看到玩家攻击玩家、玩家离开恢复自动巡逻）
using UnityEngine; using UnityEngine.AI; /// <summary> /// 敌人自动巡逻 /// </summary> publ ...
abb变频器正反转切换参数_变频器自动节能功能与电动机正反转图解
1.预置变频器的"自动节能"功能有效时能节能吗? 变频器的自动节能功能预置有效时,具有一定的节能效果.预置的方法很简单,一般只要预置动作或不动作,有效或无效即可.例如富士G11S系 ...
用GUI自动控制键盘和鼠标
用GUI自动控制键盘和鼠标 --出处 https://automatetheboringstuff.com/chapter18/ 用GUI自动控制键盘和鼠标了解用于编辑电子表格,下载文件和启动 ...
谷歌浏览器自动填充功能怎么开启？自动填充功能开启方法
为了避免用户在登录同一网站时频频输入账号.密码的现象,谷歌在自家的Chrome浏览器中贴心的加入了"自动填充功能".那么,谷歌浏览器自动填充功能要怎么开启呢?不清楚操作方法的朋友, ...
excel求和为什么是0_Excel使用小技巧-Excel里的自动求和功能
非常欢迎大家关注我的公众号,我会定期分享一些Office办公软件相关的小知识小妙招,也会分享一些其他的小知识或者是一些比较好的文章.图集或者视频. 也希望大家对我多多支持,如果大家有想了解的内容,也可 ...
11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
产品页面顶部切换功能本节主要讲解产品详细页面中顶部切换界面和功能的实现,效果如图13-9所示. 1.布局分析结构布局分析示意如图13-10所示. 根据上面的布局分析,我们会产生基础的框架,代码示例 ...
开启Excel的自动保存功能(转)
开启Excel的自动保存功能(转) 进入夏季用电高峰时期后,笔者单位的电闸不时出现跳闸.这下可忙坏了几个搞统计的同事:有时辛辛苦苦将数据录入Excel中,却在突然断电中消失殆尽,只得从头重新录入 ...
react招聘项目——使用cookie实现项目自动登录功能
cookie实现自动登录功能最近在项目中使用了cookie实现自动登录的功能,下面我将使用项目中的例子来对cookie进行简单的分析. 功能需求是:在用户访问网址的时候,使用cookie对用户的操作 ...

tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换

tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换相关推荐

最新文章

热门文章

tab栏自动切换功能 鼠标移动上去取消自动切换 离开启动自动切换

tab栏自动切换功能 鼠标移动上去取消自动切换 离开启动自动切换相关推荐

最新文章

热门文章

tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换

tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换相关推荐