I am trying to Simplify this code. Here is what i have so far.
<style type="text/css">
body {
background-color: #6A6A6A;
overflow: hidden;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tabcontent1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
#image1 {
background-color: bisque;
}
#image2 {
background-color: #76552d;
}
#image3 {
background-color: #432b0d;
}
</style>
<div class="box">
<div id="image1" class="tabcontent1"></div>
<div id="image2" class="tabcontent1"></div>
<div id="image3" class="tabcontent1"></div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
function openCity1(evt, cityName) {
var i, tabcontent1;
tabcontent1 = document.getElementsByClassName("tabcontent1");
for (i = 0; i < tabcontent1.length; i++) {
tabcontent1[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
var clicked = 0;
$("body").on("keydown", function (event) {
if (event.which == 38 && clicked == 0) {
openCity1(event, 'image1');
clicked = 1;
}
else if (event.which == 38 && clicked == 1) {
openCity1(event, 'image2');
clicked = 2;
}
else if (event.which == 38 && clicked == 2) {
openCity1(event, 'image3');
clicked = 3;
}
else if (event.which == 40 && clicked == 3) {
openCity1(event, 'image2');
clicked = 2;
}
else if (event.which == 40 && clicked == 2) {
openCity1(event, 'image1');
clicked = 1;
}
});
</script>
I want to change TABS with the UP and DOWN arrows.
I want it to be as small as possible.
So basically i want to change TABS with the keyboard but not the Clicked = 1 way ..Or Maybe the Clicked++ way .
I also tried the Jquery tabs way but could not figure that out.