鼠标点击谁谁变色

简介:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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>

<div class="box" id="box">
   <ul>
 <li>选项卡1<em></em><i></i></li>
 <li class="current">选项卡2<em></em><i></i></li>
 <li>选项卡3<em></em><i></i></li>
   </ul>
</div>
<script>
function gid(objectId) {return document.getElementById(objectId);}
function addEvt(tab){
    var ctab = gid(tab).getElementsByTagName('li');
    for(var i = 0;i<ctab.length;i++)
    { 
        ctab[i].onclick =function std(){
for(var i = 0;i<ctab.length;i++){
ctab[i].className="";
}
this.className="current";
        }
    }
}
addEvt("box");
</script>
</body>
</html>

目录
相关文章
|
2月前
低仿lusaxweb鼠标
低仿lusaxweb鼠标
14 0
|
3月前
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
865 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
Windows
怎么让鼠标带黄色光圈?
怎么让鼠标带黄色光圈?
1053 0
怎么让鼠标带黄色光圈?
|
API
用VBS控制鼠标的实现代码(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击)
网上搜到的答案普遍是VBS无法实现,或者是要用第三方COM(ActiveX?)组件。我对第三方组件是很反感的,使用第三方组件毫无可移植性可言,因为别人的系统中不一定注册了这个组件。我的建议是,尽量不要在VBS代码中调用第三方组件,除非你的程序只是写来自己用。
2164 0
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
965 0
fbh
|
JavaScript 前端开发
鼠标移到图片上图片放大
一 在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。
fbh
1767 0