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

淩亂°似流年 2022-10-06 00:46 256阅读 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 条评论，256人围观）

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

相关阅读

相关页面滚动时自动切换Tab标签,点击标签自动滚动页面

以下是完整代码： <template> <div class="box"> <div class="tab" ref="tab"> <div v-for="(item,

ゝ一世哀愁。/ 2024年03月23日 15:16/ 0 赞/ 89 阅读

相关 Tab页切换时页面自动刷新效果

Tab页切换时页面自动刷新效果由于工作中奇葩的需求和页面设计，如下： ![tab页效果][tab] > 效果要求：tab页切换时要刷新一次页面，但问题是整个父页

清疚/ 2023年10月17日 17:13/ 0 赞/ 15 阅读

相关 idea左右切换页面返回上一次鼠标位置

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAcXFfMjczMjcyNjE_size_13_color_FFF

妖狐艹你老母/ 2023年10月02日 17:46/ 0 赞/ 17 阅读

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

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

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

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

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

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

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

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

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

相关鼠标悬停时，图片切换的方法

在我们写前端页面时，经常会遇到这种情况，就是鼠标悬停某个图标或者图片时，图片颜色发生了变化或者图片发生改变。这种情况如何实现？ 1、直接在html样式里进行切换

一时失言乱红尘/ 2022年10月26日 14:05/ 0 赞/ 212 阅读

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

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

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

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

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

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

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

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

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