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

masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > JS实现标签页效果(配合css)_javascript技巧

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

WBOY

Lepaskan： 2016-05-16 17:38:21

asal

1166 orang telah melayarinya

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

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

首先来看HTML代码：

复制代码代码如下:

Label berkaitan：

js halaman tab

sumber：php.cn

Artikel sebelumnya：运算符&&的三个不同层次_基础知识 Artikel seterusnya：Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)_extjs

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang