html鼠标自动左右切换,鼠标hover时tab自动切换

淩亂°似流年 2022-10-06 00:46 239阅读 0赞

tab是经常用到的一项技术，其原理并不难啊，过程大致可以分为三步：

1)获取导航区的标签并将其存放于一个数组中

2)获取显示区的标签并将其存放于另一数组中

3)事件处理：显示导航区对应的内容，其他不相关内容隐藏掉

上面三步是用js来实现的

function setTab(n)\{

var tabs=document.getElementById("navs").getElementsByTagName("li");

var show=document.getElementById("main").getElementsByTagName("div");

for(var i=0;i

if(i==n)\{

tabs\[i\].className="nav\_bar";

show\[i\].className="main\_bar";

\}else\{

tabs\[i\].className=" ";

show\[i\].className=" ";

\}

\}

\}

上面的js逻辑部分实现了，剩下的就是html和css部分了

html代码如下

html>

TAB实现自动切换

# TAB实现自动切换 #

标题一标题二标题三标题四

很多时候一个元素的样式并非直接对元素定义，而是对其祖先元素定义，然后通过继承性得到样式。例如，在body中定义的文字的颜色(color)属性，在p元素中也是有效的。这就是样式的继承。

例如：在body中定义了字体的大小，元素p的属性style中定义了文字颜色，内部样式表和外部样式表中也都定义了元素p的文字颜色，而且某段文字还用属性id和类名都定义了文字颜色。这样会导致复杂的样式层叠关系，到底谁可以起作用呢？

如果一个元素被具有相同属性名的多个样式重复作用，也就是出现了样式层叠，CSS需要通过这些样式的选择器的特殊性来进行选择其中的一个样式。选择器越特殊优先权越高，选择器优先权最高的样式被选中。如果最高优先权的有多个，则要看这些样式中哪个样式离这个元素最近，离得最近的被选中

盒子模型是css的核心，也是网页设计的核心内容，基本上所有的网页都有用到盒子模型。每个盒子都有border，margin，padding和content四个属性，但是盒子模型有两种不同的解释：标准W3C盒子模型和IE6盒子模型。

css代码如下

\#header\{

width: 603px;

text-align: center;

margin: 0 auto;

\}

\#content\{

margin: 0 auto;

width: 603px;

height: 403px;

\}

li\{

float: left;

width: 150px;

height: 30px;

line-height: 30px;

text-align: center;

list-style: none;

cursor: pointer;

\}

li.nav\_bar\{

background-color: \#ccc;

border-left:1px solid \#ccc;

border-top:1px solid \#ccc;

border-right:1px solid \#ccc;

\}

\#main div\{

width: 600px;

height: 370px;

clear: left;

border: solid 1px \#ccc;

display: none;

\}

\#main div.main\_bar\{

display: block;

text-indent: 2em;

\}

.nav\_bar,.main\_bar\{

background-color: \#ccc

\}

最终浏览器显示结果如下

![0818b9ca8b590ca3270a3433284dd417.png][]

![0818b9ca8b590ca3270a3433284dd417.png][]

![0818b9ca8b590ca3270a3433284dd417.png][]

![0818b9ca8b590ca3270a3433284dd417.png][]

[0818b9ca8b590ca3270a3433284dd417.png]: /images/20221005/d448a0dfde8d4edc876edaee44c69644.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 labelme鼠标切换点击模式

LabelMe 是一个图像标注工具，鼠标切换点击模式是指在 LabelMe 中使用鼠标时可以进行的不同的操作。具体来说，在 LabelMe 中，可以使用鼠标来绘制标注框，或者点

￡神魔★判官ぃ/ 2024年03月26日 08:26/ 0 赞/ 68 阅读

相关 2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片

用html jQuery实现广告轮播图自动切换滚动页面运行图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

比眉伴天荒/ 2022年12月19日 03:53/ 0 赞/ 110 阅读

相关 HTML+CSS实现鼠标滑过tab页切换

实现效果：当鼠标滑过tab标签时，实现对应标签的内容切换 <!DOCTYPE html> <html> <head> <ti

雨点打透心脏的1/2处/ 2022年12月04日 01:03/ 0 赞/ 500 阅读

相关 2020 用html JavaScript实现广告轮播图切换鼠标悬浮下标且左右切换图片

用html JavaScript实现广告轮播图切换鼠标悬浮下标且左右切换图片如图所示，左右有箭头可以切换照片，鼠标悬浮下标数字可跳转图片 ![在这里插入图片描述][

秒速五厘米/ 2022年11月20日 05:56/ 0 赞/ 336 阅读

相关 vue项目中鼠标悬浮图片实现hover效果切换图片-案例

![20210525180109257.gif][] 1、使用css实现鼠标滑动切换图片效果 <ul class="ullist"> <li cla

àì夳堔傛蜴生んèń/ 2022年10月15日 14:50/ 0 赞/ 321 阅读

相关 html鼠标自动左右切换,鼠标hover时tab自动切换

tab是经常用到的一项技术，其原理并不难啊，过程大致可以分为三步： 1)获取导航区的标签并将其存放于一个数组中 2)获取显示区的标签并将其存放于另一数组中 3)事件处理：

淩亂°似流年/ 2022年10月06日 00:46/ 0 赞/ 240 阅读

相关 tab切换延时问题。

tab切换延时问题，困扰我一整天，一般tab切换效果鼠标快速划过后就会闪的特别厉害，我就想加个延时效果，于是用上了settimeout方法，结果发现又出现了另外一个问题

心已赠人/ 2022年09月19日 14:24/ 0 赞/ 196 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 293 阅读

相关 jquery鼠标移上div切换

样式： .tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:a

偏执的太偏执、/ 2022年07月21日 02:17/ 0 赞/ 182 阅读

相关 tab切换

/tab切换/ .tab-common { width: 100%; background-color: 25303c; } .tab-common .tab

迷南。/ 2022年06月07日 14:20/ 0 赞/ 244 阅读