鼠标点击谁谁变色

最新推荐文章于 2022-09-28 16:37:35 发布

转载最新推荐文章于 2022-09-28 16:37:35 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/20755

文章标签：

#xhtml

本文介绍了一种使用CSS2实现选项卡效果的方法。通过简单的HTML结构和精心设计的CSS样式，可以创建平滑过渡的选项卡界面。代码中还包含了一个简单的JavaScript函数，用于切换当前激活的选项卡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>css2实现选项卡效果</title>

<style>

*{ margin:0; padding:0;}

ul,li{list-style:none;}

.box{position:relative;margin:100px auto;background:#ccc;width:600px;height:32px;line-height:32px;overflow:hidden;}

.box li{float:left;width:200px;text-align:center;position:relative;z-index:2;}

.box li em{width:0;height:0;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:0;font-size:0;}

.box li i{width:0;height:0;border-color:transparent transparent transparent #ccc;border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:0;line-height:0;font-size:0;}

.box li.current{background:#933;z-index:1;color:#fff;}

.box li.current i{border-color:transparent transparent transparent #933;}

</style>

</head>

<body>

<ul>

</ul>

</div>

function gid(objectId) {return document.getElementById(objectId);}

function addEvt(tab){

var ctab = gid(tab).getElementsByTagName('li');

for(var i = 0;i<ctab.length;i++)