鼠标点击谁谁变色

<!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>

时间: 2024-09-12 23:53:53

鼠标点击谁谁变色的相关文章

菜鸟求助 关于鼠标点击按钮 可以这个框架变色

问题描述 就是一个框架中放3个按钮然后鼠标点击不同的按钮框架是不同的颜色是不是用到MouseEvent事件?3个按钮可以弄出来那个变色怎么弄的?希望高玩指导谢谢大家~ 解决方案 解决方案二:JFramef=newJFrame();finalJPaneltp=newJPanel();JButtonb=newJButton("红");b.addActionListener(newActionListener(){publicvoidactionPerformed(ActionEvente)

javascript实现鼠标点击页面 移动DIV_javascript技巧

<script type="text/javascript"> //那种方式移动 var choMove = false; //是否绑定过click var isClick = true; //引用DIV var oDiv = null; //引用Input var oInput = null; //封装事件绑定的通用对象 var evnetUtil = { addEventHandle:function(oElement,evtype,fun){ oElement.att

可以触发点击事件并变色的UILabel

可以触发点击事件并变色的UILabel 谁说UILabel不能够当做button处理点击事件呢?今天,笔者就像大家提供一个改造过的,能够触发点击事件并变色的UILabel:) 效果图: 还能当做计时器用囧: 源码如下: TapLabel.h 与 TapLabel.m // // TapLabel.h // TapLabel // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @class

chart-DevExpress Silverlight Chart Scatter 鼠标点击事件

问题描述 DevExpress Silverlight Chart Scatter 鼠标点击事件 用的是DevExpress Silverlight ChartControl控件 private void mScatter_MouseLeftButtonUp(object sender MouseButtonEventArgs e) { FrameworkElement fe = e.OriginalSource as FrameworkElement; if (fe == null) retu

Flash鼠标点击显示打散动画

核心提示:Flash鼠标点击显示打散动画教程. 1.新建Flash文档,550*400,其它默认. 2.创建影片剪辑,选椭圆工具,笔触无,填充色放射渐变,画一个椭圆(形状自定,我相你会比我画得更好),右键库中设置链接,类名Ball. 3.返回场景1,第一层建背景(随意),新建as图层,在as图层第一帧输入代码: //小球的初始位置 //小球的初始位置 var ballx:Number = 275; var bally:Number = 400; //小球运动速度 var speed:Number

java响应鼠标点击事件的小程序

一个很基础的小程序,可以作为一种方法嵌入到其他应用中 import java.awt.Graphics;import java.awt.Event;import java.awt.Color;public class mouse extends java.applet.Applet{int num=0;//计数器初始化int px,py;public boolean mouseDown(Event evt,int x,int y)//鼠标按下事件{px=x;py=y;//鼠标按下时的坐标num+

javascript获取鼠标点击元素对象

 本篇文章主要介绍了利用javascript获取鼠标点击元素对象的示例代码.需要的朋友可以过来参考下,希望对大家有所帮助 IE: var obj=document.elementFromPoint(event.clientX,event.clientY);   获取对象文本 var a=obj.innerText   FF里面要在事件里面添加对象才可以读取坐标.   HTML: onclick="gj(event)"   JS:      代码如下: function gj(event

js鼠标点击图片实现随机变换图片的方法

 这篇文章主要介绍了js鼠标点击图片实现随机变换图片的方法,涉及鼠标事件与随机函数的使用技巧,需要的朋友可以参考下     本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <html> <title>鼠标点击图片即可随机变换图片<

JS实现鼠标点击展开或隐藏表格行的方法

 这篇文章主要介绍了JS实现鼠标点击展开或隐藏表格行的方法,实例分析了javascript操作table表格与css样式的技巧,需要的朋友可以参考下     本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1