如上图所示为制作的标签页，我们想要实现的效果是当鼠标移到某一个标签的时候，在下面的内容区显示对应的内容，并且相应标签的颜色需要改变，如图中所示当前鼠标的位置在“标签1”上，则内容区域显示的内容为“我是内容1”，并且“标签1”的">
suchen

Heim >Web-Frontend >js-Tutorial >JS实现标签页效果(配合css)_javascript技巧

JS实现标签页效果(配合css)_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:38:211132Durchsuche
实现的效果：
JS实现标签页效果(配合css)_javascript技巧
如上图所示为制作的标签页，我们想要实现的效果是当鼠标移到某一个标签的时候，在下面的内容区显示对应的内容，并且相应标签的颜色需要改变，如图中所示当前鼠标的位置在“标签1”上，则内容区域显示的内容为“我是内容1”，并且“标签1”的颜色要比“标签2”和“标签3”深一些，同样鼠标移到“标签2”和“标签3”的时候显示“我是内容2”和“我是内容3”。这样的效果是CSS和JS配合实现的。下面我们就来看看具体代码：

首先来看HTML代码：
复制代码 代码如下:





Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：运算符&&的三个不同层次_基础知识Nächster Artikel：Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)_extjs

In Verbindung stehende Artikel

Mehr sehen