貼上自己的代碼,這回真是原創
<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個圖片,我放在資源裏自己下載吧
上傳文檔還在審覈中。。。
終於審覈完了。