The HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="link-buttons.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="link-buttons.js"></script>
<!--<script src="src/jquery-3.2.1.min.js"></script>-->
</head>
<body onload="attachEvents()">
<a class="button">Sofia</a>
<a class="button">Plovdiv</a>
<a class="button">Varna</a>
</body>
</html>
CSS file:
a.button {
border: 1px solid #CCC;
background: #EEE;
padding: 5px 10px;
border-radius: 5px;
color: #333;
text-decoration: none;
display: inline-block;
margin: 5px;
}
a.button.selected {
color: #111;
font-weight: bold;
border: 1px solid #AAA;
background: #BBB;
}
a.button.selected::before {
content: "\2713\20\20";
}
a:hover {
cursor: pointer;
}
JavaScript file with the jQuery code inside:
function attachEvents() {
$("a.button").on("click", buttonClicked);
function buttonClicked() {
$(".selected").removeClass("selected");
$(this).addClass("selected");
}
}
Account
