贴上自己的代码,这回真是原创
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../jquery.min.js"></script>
<style type="text/css">
/**查看样式***/
.class1 {
background-image: url(./image/eye-a.png);
margin: 7px 10px 0 0;
width: 26px;
height: 26px;
float: left;
}
.class1:hover {
background-image: url(./image/eye-b.png);
}
.class1-click{
background-image: url(./image/eye-c.png);
}
.class1-click:hover{
background-image: url(./image/eye-c.png);
}
/**关联样式**/
.class2 {
background-image: url(./image/relevance-a.png);
margin: 7px 10px 0 0;
width: 26px;
height: 26px;
float: left;
}
.class2:hover {
background-image: url(./image/relevance-b.png);
}
.class2-click{
background-image: url(./image/relevance-c.png);
}
.class2-click:hover {
background-image: url(./image/relevance-c.png);
}
/**编辑样式**/
.class3 {
background-image: url(./image/edit-a.png);
margin: 7px 10px 0 0;
width: 26px;
height: 26px;
float: left;
}
.class3:hover {
background-image: url(./image/edit-b.png);
}
.class3-click{
background-image: url(./image/edit-c.png);
}
.class3-click:hover{
background-image: url(./image/edit-c.png);
}
</style>
</head>
<body>
<div>
<div class="class1" onmousedown="cssfunctionStyle(1,3)"></div>
<div class="class2" onmousedown="cssfunctionStyle(2,3)"></div>
<div class="class3" onmousedown="cssfunctionStyle(3,3)"></div>
</div>
</body>
<script >
//该函数是下面三个函数封装后的结果,没啥特殊的东西
function cssfunctionStyle(index,count){
$('.class'+index).addClass('class'+index+'-click');
for(var i =1;i<=count;i++){
if(i==index){
continue;
}
$('.class'+i).removeClass('class'+i+'-click');
}
}
/*
这三个函数样子差不多,就封装了一下,上面函数是封装后的函数
function f1(){
$('.class1').addClass('class1-click');
$('.class2').removeClass('class2-click');
$('.class3').removeClass('class3-click');
}
function f2(){
$('.class1').removeClass('class1-click');
$('.class2').addClass('class2-click');
$('.class3').removeClass('class3-click');
}
function f3(){
$('.class1').removeClass('class1-click');
$('.class2').removeClass('class2-click');
$('.class3').addClass('class3-click');
}
*/
</script>
</html>
代码里需要jquery和6个图片,我放在资源里自己下载吧
上传文档还在审核中。。。
终于审核完了。