Изменить индивидуальное состояние кнопки

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

Вы должны использовать фоновое изображение вместо изображения. Затем вы можете добавить .active класс и определить фоновое изображение с помощью CSS для всех кнопок, таких как:

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

Edit:

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"); 
}