Mam zestaw przycisków. Potrzebuję przycisku, który jest kliknięty, aby pozostać podświetlony po kliknięciu. Po kliknięciu innego przycisku, potrzebuję ostatniego podświetlonego przycisku, aby wrócić do swojego pierwotnego stanu, a na nowo klikający się na nowo, który zostanie podświetlony i tak dalej.

<!DOCTYPE html>
<html>
<head>
<style>
#button1 {
width: 100px;
height: 50px;
float: left;
margin-right: 3px;
background-color: red;
}
#button2 {
width: 100px;
height: 50px;
float: left;
background-color: red;
}
#button1:hover {
background-color: yellow;
}
#button2:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div id="button1"></div>
<div id="button2"></div>
</body>
</html>
0
UltraMaximum 14 sierpień 2014, 21:22

3 odpowiedzi

Najlepsza odpowiedź

Oto prosty bit kodu, a jego naprawdę prosty, tylko rodzimy JavaScript, ale jeśli sprawdzisz skrzypkę poniżej, możesz to zobaczyć

http://jsfiddle.net/y8rbncwj/

var toggle = function (e, old) {
   e.className = "selected";
   document.getElementById(old).className="";

};

Nie wiedząc, co dokładnie próbujesz zrobić, ile masz przycisków, będzie to przełączyć dwa przyciski, kliknij najpierw na niebiesko, kliknij sekundę najpierw wraca do czerwonego, przycisk kliknięci jest niebieski i tak dalej.

Możesz to zrobić za pomocą CSS i nie Java-Script za pomocą przycisków radiowych, ponieważ z natury pracują w grupach i mogą być przełączane, aby zrobić, aby stylować etykiety jak przycisk z CSS i ukryj rzeczywiste przełączanie za nim.

2
MartinWebb 14 sierpień 2014, 17:38

Powinieneś zajrzeć do JavaScript, aby to osiągnąć. Osobiście używam jQuery, ale prosty JavaScript będzie działał dobrze na ten scenariusz. W3schools zapewnia ładne intro do integracji, Oto.

Dla twojego konkretnego scenariusza będziesz chciał użyć czegoś takiego:

document.getElementById('button1').onclick = function() {
   // Change button1 CSS here
}​;​

Dodatkowo, chciałbyś dodać do tego, aby pomieścić do #button2 i inne zasady wspomniane.

1
Tyler Ritchie 14 sierpień 2014, 17:32

Stworzyłem ogólną klasę .button i odpowiednią funkcję JavaScript, aby to osiągnąć. Będzie przełączyć wiele przycisków, o ile wszystkie mają tę samą klasę .button:

CSS:

.button {
    width: 100px;
    height: 50px;
    float: left;
    margin-right: 3px;
    background-color: red;
}

.button:hover,
.button.selected {
    background-color: yellow;
}

Js (z jQuery):

var button = $('.button');

button.on('click', function(){
    button.removeClass('selected');
    $(this).addClass('selected');
});

HTML:

<div id="button1" class="button"></div>
<div id="button2" class="button"></div>
<div id="button3" class="button"></div>
<div id="button4" class="button"></div>

Fiddle: http://jsfiddle.net/oeeglosw/

0
o--oOoOoO--o 14 sierpień 2014, 17:41