so I have created a tabpane using html,css,and javascript so the issue I am facing is that when I click outside the button the background color of the the active tab’s button disappears .I am able to change the color of the buttons while switching between the tabs by using onfocus() and onblur() functions ,but whenever I click outside the button/on body active tab’s button’s background color disappears.
Is there a way to solve this issue?
// console.log('hii');
function fun1(a){
// console.log(a);
var x = document.getElementById(a)
var data = document.getElementsByClassName('inner_section')
console.log(data);
for(var i=0;i < data.length;i++){
data[i].style.display="none"
}
x.className +=" slide-in-bottom"
x.style.display = "block";
}
function fun2(b){
b.style.backgroundColor="#ff6136"
var d = document.getElementById('button_1')
d.classList.remove('active_button')
}
function fun3(c){
c.style.backgroundColor="white"
}body{
background-color: whitesmoke;
}
.section h3,h1{
text-align: center;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
}
.section h3{
color: gray;
}
.main_button_class{
width: 100%;
display: flex;
justify-content: center
}
.active_button{
background-color: #ff6136;
}
.main_button_class button{
margin: 1em;
padding: 1.5em;
padding-left:2em;
padding-right: 2em;
border: none;
color: rgb(20, 20, 20);
font-family: 'Playfair Display', serif;
cursor: pointer;
box-shadow: 0px 8px 15px rgba(61, 61, 61,0.3);
}
.icons{
width: 20px;
height: auto;
}
.divs{
margin: 1.5em;
width: 600px;
height: 100px;
border:none;
box-shadow: -7px 8px 7px lightgrey;
background-color: white;
display: flex;
justify-content: space-between;
}
.divs:hover{
background-color: #ff6136;
}
.inner_divs_1{
display: flex;
}
.inner_divs_1 h4{
margin-right: 1em;
font-size: 18px;
font-family: 'Playfair Display', serif;
}
.inner_divs_2 {
font-size: 2em;
padding: 11px;
font-family: 'Mulish', sans-serif;
}
.text-muted{
color: gray;
font-size: 18px;
font-family: 'Mulish', sans-serif;
}
.abc{
display: flex;
width: 100%;
height: fit-content;
justify-content: space-around;
}
.pqr{
display: flex;
width: 100%;
height: fit-content;
justify-content: space-around;
}
.xyz{
display: flex;
width: 100%;
height: fit-content;
justify-content: space-around;
}
#dish_2{
display: none;
}
#dish_3{
display: none;
}
.inner_images{
border-radius: 50%;
width: 70px;
height: 70px;
margin: 1em;
}
.slide-in-bottom {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 7 part 2</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index2.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
<!-- <script src="https://kit.fontawesome.com/d98e4752db.js" crossorigin="anonymous"></script> -->
</head>
<body>
<div class="section">
<h3>our menu</h3>
<h1>Restaurant & Bar</h1>
<div class="main_button_class">
<button id="button_1" class="active_button" onclick="fun1('dish_1')" onfocus="fun2(this)" onblur="fun3(this)" ><img src="tray.png"class="icons"/> Main</button>
<button id="button_2" onclick="fun1('dish_2')"onfocus="fun2(this)"onblur="fun3(this)"><img src="beer.png"class="icons"/> Dessert</button>
<button id="button_3" onclick="fun1('dish_3')"onfocus="fun2(this)"onblur="fun3(this)"><img src="cheers.png"class="icons"/> Drinks</button>
</div>
<!-- Part 1 -->
<div class="inner_section"id="dish_1">
<div class="abc">
<div class="inner_section1" >
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-3.jpg.pagespeed.ic._eupGZGDhZ.webp" alt="" srcset="" class="inner_images">
<h4>Grilled Beef with potatoes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs" >
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-4.jpg.pagespeed.ic.QNS0cGseKC.webp" alt="" srcset="" class="inner_images">
<h4>Fruit Vanilla Ice Cream<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-5.jpg.pagespeed.ic.h2NHjzs2rt.webp " alt="" srcset="" class="inner_images">
<h4>Asian Hoisin Pork<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-6.jpg.pagespeed.ic.LHa9ujD1jc.webp " alt="" srcset="" class="inner_images">
<h4>Spicy Fried Rice & Bacon<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-7.jpg.pagespeed.ic.QKJ9esJPYg.webp " alt="" srcset="" class="inner_images">
<h4>Mango Chili Chutney<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
</div>
<div class="inner_section2">
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-8.jpg.pagespeed.ic.X1UarM12S1.webp " alt="" srcset="" class="inner_images">
<h4>Savory Watercress Chinese Pancakes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-9.jpg.pagespeed.ic.RMbgqdIacd.webp " alt="" srcset="" class="inner_images">
<h4>Soup With Vegetables And Meat<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<!-- -->
<div class="divs">
<div class="inner_divs_1">
<img src=" https://preview.colorlib.com/theme/cozy/images/xdish-10.jpg.pagespeed.ic.AjEzQKSqtq.webp" alt="" srcset="" class="inner_images">
<h4>Udon Noodles With Vegetables<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src=" https://preview.colorlib.com/theme/cozy/images/xdish-11.jpg.pagespeed.ic.SSID_aLKfC.webp" alt="" srcset="" class="inner_images">
<h4>Baked Lobster With A Garnish<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdish-8.jpg.pagespeed.ic.X1UarM12S1.webp" alt="" srcset="" class="inner_images">
<h4>Octopus with Vegetables<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
</div>
</div>
</div>
<!-- Part 2 -->
<div class="inner_section"id="dish_2">
<div class="pqr">
<div class="inner_section1" >
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-1.jpg.pagespeed.ic.SW4Gb-2Sdd.webp " alt="" srcset="" class="inner_images">
<h4>Grilled Beef with potatoes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs" >
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-2.jpg.pagespeed.ic.PXl-DGXsd5.webp " alt="" srcset="" class="inner_images">
<h4>Grilled Beef with potatoes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-3.jpg.pagespeed.ic.QA267i3edb.webp " alt="" srcset="" class="inner_images">
<h4>Grilled Beef with potatoes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-4.jpg.pagespeed.ic.ExoXl1Yy0j.webp " alt="" srcset="" class="inner_images">
<h4>Grilled Beef with potatoes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-5.jpg.pagespeed.ic.yC-EI1C2Sl.webp " alt="" srcset="" class="inner_images">
<h4>Grilled Beef with potatoes<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
</div>
<div class="inner_section2">
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-6.jpg.pagespeed.ic.xuS6fI649R.webp " alt="" srcset="" class="inner_images">
<h4>Tiramisu<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-7.jpg.pagespeed.ic.uGV1uE0TVM.webp " alt="" srcset="" class="inner_images">
<h4>Chocolate Cream<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-8.jpg.pagespeed.ic.nzJWrF6g2R.webp " alt="" srcset="" class="inner_images">
<h4>Pizza Pie<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-9.jpg.pagespeed.ic.b75RlkqLs7.webp" alt="" srcset="" class="inner_images">
<h4>Sicilian Ricotta<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdessert-10.jpg.pagespeed.ic.q2XtdIPwdq.webp " alt="" srcset="" class="inner_images">
<h4>Mango FLoat<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
</div>
</div>
</div>
<!-- Part 3 -->
<div class="inner_section"id="dish_3">
<div class="xyz">
<div class="inner_section1" >
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-1.jpg.pagespeed.ic.RCrXYE6lI1.webp " alt="" srcset="" class="inner_images">
<h4>Lemon Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs" >
<div class="inner_divs_1">
<img src=" https://preview.colorlib.com/theme/cozy/images/xdrink-2.jpg.pagespeed.ic.SpvM1G0DSa.webp " alt="" srcset="" class="inner_images">
<h4>Guava Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src=" https://preview.colorlib.com/theme/cozy/images/xdrink-3.jpg.pagespeed.ic.gVXfnHFXF_.webp " alt="" srcset="" class="inner_images">
<h4>Guava Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<!-- -->
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-4.jpg.pagespeed.ic.3viOU5YJzH.webp" alt="" srcset="" class="inner_images">
<h4>Cola<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<!-- -->
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-5.jpg.pagespeed.ic.ZiCZ5rrjr4.webp " alt="" srcset="" class="inner_images">
<h4>Wine<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
</div>
<div class="inner_section2">
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-6.jpg.pagespeed.ic.u6RPJcbH6h.webp " alt="" srcset="" class="inner_images">
<h4>Beer<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<!-- -->
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-7.jpg.pagespeed.ic.FxQPy3duGU.webp" alt="" srcset="" class="inner_images">
<h4>Mango Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<!-- -->
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-8.jpg.pagespeed.ic.E5AmxrGlDY.webp" alt="" srcset="" class="inner_images">
<h4>Apple Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-10.jpg.pagespeed.ic.0RAnNKt8zC.webp" alt="" srcset="" class="inner_images">
<h4>Orange Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
<div class="divs">
<div class="inner_divs_1">
<img src="https://preview.colorlib.com/theme/cozy/images/xdrink-9.jpg.pagespeed.ic.qnCVD_wbaQ.webp" alt="" srcset="" class="inner_images">
<h4>Strawberry Juice<br>
<span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span>
</h4>
</div>
<div class="inner_divs_2">
$29
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index2.js"></script>
</body>
</html>