Po kliknięciu na przycisk Logowanie ma się pojawić taki sam kolor tła jak w polu tekstowym.

Question

Witam.

Na górze po prawej mam przycisk Logowanie, po kliknięciu którego wyskakuje mi pole tekstowe. Aktualnie kolor tła przycisku jest czarny, a kolor czcionki jest biały. Po najechaniu na ten przycisk kolor tła przycisku zmienia mi się na purpurowy.

Chodzi mi tylko o to, aby po kliknięciu na ten przycisk wraz z pojawieniem się pola tekstowego pojawił się na stałe kolor tła - purpurowy tego przycisku (#800080). Kolor tła pola tekstowego też jest purpurowy.

Wobec tego co muszę dopisać, aby kolor tła przycisku był purpurowy?

<div class="login">Logowanie</div>
	<div id="pole_tekstowe">
	</div>

.login
{
	float: right;
	display: block;
	padding: 5px;
	text-decoration: none;
	background-color: #000000;
	color: white;
	font-size: 11px;
}

.login:hover
{
	text-decoration: none;
	background-color: #800080;
	color: white;
	cursor: pointer;
}

#pole_tekstowe
{
	display: none;
	width: 212px;
	height: 275px;
	background-color: #800080;
	color: white;
	font-size: 11px;
	padding: 15px;
	position: absolute;
	z-index: 9999;
	top: 30px;
	right: 180px;
}

<script type="text/javascript">
	
	$(document).ready(function(){
		$(".login").click(function(){
			$('#pole_tekstowe').toggle();
		});
	});
	
</script>

 

Answer 1

var one = document.querySelector(".login");
one.addEventListener("click", function () {
 document.querySelector(".login").classList.toggle("pur")
}, false);

 

i w css:

 

.pur {
   background: #800080;
}

 

 

Możesz też zastosować :focus

Comments

Teraz działa tak jak powinno.

Wielkie dzięki za pomoc, PATYL.

Answer 2

Użyj selektora :focus :)

// nie zrozumiałem do końca, mozna delete :D

Comments

Selector :focus ma być w CSS zapisany tak?:

.login:focus
{
	background-color: #800080;
}

Taki zapis nie przyniósł żadnego efektu.

Zastosuję metodę użytkownika PATYL.

Answer 3

Skoro już korzystasz z jQuery zainteresuj się metodą CSS. Tam znajdziesz rozwiązanie.