JS实现制表符效果(用css)

取得的效果：

如上图所示，选项卡页面制作完成。我们想要达到的效果是，当鼠标移动到某个标签页时，对应的内容会显示在后面的内容区域，需要改变对应标签页的颜色。如图所示，如果当前鼠标位置在“Tab 1”上，则内容区显示的内容为“我是内容1”，“Tab 1”的颜色比“Tab 2”和“Tab 3”要深。这种效果是通过CSS和JS实现的。我们来看看具体的代码：首先看HTML代码：复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=gb2312'/title选项卡效果/title链接href='./CSS/tab.css' rel='样式表'类型=' text/CSS '/script language=' JavaScript '类型=' text/JavaScript ' src=' http 3360./js file/jquery . js/' script script language=' JavaScript ' type=' text/JavaScript ' src=' http 3360./js file/tab . js '/script/Head ul id=' tab first ' Li class=' tabin ' tag 1/Li Li tag 2/Li Li tag 3/Li/ul Div id=' content now ' class=' content first in '我是content 1/Div id=' content now ' class=' content first '我是content 2/Div id=' content now ' class=' content first '我是content3/div/body/html js。代码实现思路简单。首先，为每个标签项注册一个mouseover函数。当鼠标移动到任何标签时，将执行moveover函数体中的代码。功能代码首先获取当前节点，隐藏原来显示的内容，然后根据传入的节点索引显示对应标签对应的内容。在代码中，我们可以看到除了改变HTML中的节点样式之外，我们还使用了setTimeout函数，用来延迟函数的执行时间。以下代码中的延迟时间为300毫秒，即当鼠标移动到标签时，不会立即执行，而是在300毫秒后执行。如果鼠标在300毫秒内移出标签区域，代码将不再执行。副本代码如下： $(文档)。ready(function(){ var time outid；$ ('# tab首li ')。每个(函数(索引){//每个打包的li的JQuery对象将执行函数中的代码。//index是由所有li组成的数组中当前执行该函数代码的Li的索引值。//有了索引值之后，就可以找到内容区$(这个)。mouse over(function(){ varlinode=$(this)；timeoutid=settimeout(function(){//隐藏原始显示的内容$ ('div。content in’)。remove class(' content in ')；//移除tabin属性$(' # tabsertli。塔宾')。从具有tabin属性的标签中移除class(' tabin ')；//显示当前标签$ ('div)对应的内容区域。contentfirst ')。eq(指数)。add class(' content in ')；//$(' div . contentfirst : eq(' index ')')。add CLaSS(' content in ')；//将tabin属性liNode.addClass('tabin ')添加到当前标签中；},300);}).mouse out(function(){ cleartime out(time out id))；});});});除了这种效果，我们还可以使用相同的原理为每个标签注册click函数。单击每个标签时，我们可以在原始内容区域加载不同的页面或任何页面的一部分。如果你感兴趣，可以点击这里下载源代码。源代码包含了本文提到的两种不同功能所实现的不同功能。