62 lines
1 KiB
HTML
62 lines
1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
.selected {
|
|
background: #0f0;
|
|
}
|
|
|
|
li {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
Click on a list item to select it.
|
|
<br>
|
|
|
|
<ul id="ul">
|
|
<li>Christopher Robin</li>
|
|
<li>Winnie-the-Pooh</li>
|
|
<li>Tigger</li>
|
|
<li>Kanga</li>
|
|
<li>Rabbit. Just rabbit.</li>
|
|
</ul>
|
|
|
|
<script>
|
|
ul.onclick = function(event) {
|
|
if (event.target.tagName != "LI") return;
|
|
|
|
if (event.ctrlKey || event.metaKey) {
|
|
toggleSelect(event.target);
|
|
} else {
|
|
singleSelect(event.target);
|
|
}
|
|
|
|
}
|
|
|
|
// prevent unneeded selection of list elements on clicks
|
|
ul.onmousedown = function() {
|
|
return false;
|
|
};
|
|
|
|
function toggleSelect(li) {
|
|
li.classList.toggle('selected');
|
|
}
|
|
|
|
function singleSelect(li) {
|
|
let selected = ul.querySelectorAll('.selected');
|
|
for(let elem of selected) {
|
|
elem.classList.remove('selected');
|
|
}
|
|
li.classList.add('selected');
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|