更改個人按鈕狀態

Question

我有一個使用點擊和jquery的褪色一個按鈕被點擊時，顯示一個div，然後改變按鈕的狀態下面....

http://jsfiddle.net/ttj9J/5/

HTML

<a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/vi1KLp9.png"></a> 
<a class="link" href="#" data-rel="content2"><img src="http://i.imgur.com/u1SbuRE.png"></a> 
<a class="link" href="#" data-rel="content3"><img src="http://i.imgur.com/u1SbuRE.png"></a> 
<a class="link" href="#" data-rel="content4"><img src="http://i.imgur.com/u1SbuRE.png"></a> 
<a class="link" href="#" data-rel="content5"><img src="http://i.imgur.com/u1SbuRE.png"></a> 

<div class="content-container"> 
    <div id="content1">This is the test content for part 1</div> 
    <div id="content2">This is the test content for part 2</div> 
    <div id="content3">This is the test content for part 3</div> 
    <div id="content4">This is the test content for part 4</div> 
    <div id="content5">This is the test content for part 5</div> 
</div> 

CSS

.content-container { 
    position: relative; 
    width: 400px; 
    height: 400px; 
} 
.content-container div { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

JQUERY

$(".link").click(function(e) { 
     e.preventDefault(); 
     $('.content-container div').fadeOut('slow'); 
     $('#' + $(this).data('rel')).fadeIn('slow'); 
     $(".link img").attr("src", "http://i.imgur.com/u1SbuRE.png"); 
     $(this).find("img").attr("src", "http://i.imgur.com/vi1KLp9.png"); 
}); 

$(document).ready(function() { 
    $(".link")[0].click(); 
}); 

這一切工作很大，但我試圖做的是有不同的按鈕/按鍵按下每個五個按鈕的圖像。誰能幫忙？

Answer 1

您應該使用背景圖像而不是圖像。然後，你可以通過CSS添加.active類，並定義背景圖片爲您的所有按鈕，如：

.link[data-rel="content3"] .active { 
    background-image: url(....); 
} 

編輯：

http://jsfiddle.net/ttj9J/23/

現在你可以跟我描述添加類上述

Answer 2

DEMO

function handler1() { 
    $(this).find("img").attr("src", "http://i.imgur.com/vi1KLp9.png"); 
    $(this).one("click", handler2); 
} 

function handler2() { 
    $(this).find("img").attr("src", "http://i.imgur.com/u1SbuRE.png"); 
    $(this).one("click", handler1); 
} 
$(".link").one("click", handler1); 

Another DEMO - 通過類> CSS方法

移走用於img標籤只a標籤

HTML

<a class="link active" href="#" data-rel="content1"></a> 

<a class="link" href="#" data-rel="content2"></a> 

<a class="link" href="#" data-rel="content3"></a> 

<a class="link" href="#" data-rel="content4"></a> 

<a class="link" href="#" data-rel="content5"></a> 

CSS

.link { 
    content:url("http://i.imgur.com/vi1KLp9.png"); 

} 
.active { 
    content:url("http://i.imgur.com/u1SbuRE.png"); 
} 

個

JS

$(".link").click(function() { 
    $(this).toggleClass('active'); 
}); 

後OP的評論

DEMO

JS

$(".link").click(function (e) { 
    e.preventDefault(); 
    $('.content-container div').fadeOut('slow'); 
    $('#' + $(this).data('rel')).fadeIn('slow'); 
    $('.link').removeClass('active'); 
    $(this).toggleClass('active'); 
}); 

$(document).ready(function() { 
    $(".link")[0].click(); 
}); 

CSS

.link { 
    content:url("http://i.imgur.com/u1SbuRE.png"); 
} 
.active { 
    content:url("http://i.imgur.com/vi1KLp9.png"); 
}