jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title> Standard Cocktail Bar Home Page </title>
<meta name="author" content="[email protected]">
<meta name="description" content="This page is homepage of Standard Cocktail Bar">
<meta name="keywords" content="Alcohol, Gungahlin, Drinks, Food, Standard Bar, Cocktail">
<meta name="viewport" content="width=device-width, height=auto,  initial-scale=1">
<link href="Stylesheet.css" rel="stylesheet" type="text/css">
<!-- Meta Data -->
</head>

<body>
	<div class="body">
		<nav>
      <img class="logo" src="logo1.png">
			<div class="topnav">
				<a class="active" href="Home Page.html">Home </a>
				<a href="AboutUs.html">About Us </a>
				<a href="WhatsOn.html">Whats On </a>
				<a href="Menu.html">Menu </a>
				<a href="ContactUs.html">Contact Us </a>
			</div>
		</nav>
<!--NavBar-->

	<div class="BG1"></div>
<!--BG1-->

	<h1> Set Title</h1>
<!--Heading-->

	<p> Intro to business </p>
	<p> Quick Info of business </p>
<!--Business Info-->

	<div class="BG2"></div>
<!--BG2-->


	<table style="width:80%; margin-left:auto; margin-right:auto">
		<caption style="font-size:180%"> <b>Opening Hours</b></caption>
		<tr>
				<th> Days </th><th>Hours</th>
		</tr>
		<tr>
				<td>Monday</td><td>Closed</td>
		</tr>
		<tr>
				<td>Tuesday</td><td>12:00pm - 9:00pm</td>
		</tr>
		<tr>
				<td>Wednesday</td><td>12:00pm - Late</td>
		</tr>
		<tr>
				<td>Thursday</td><td>12:00pm - Late</td>
		</tr>
		<tr>
				<td>Friday</td><td>12:00pm - Late</td>
		</tr>
		<tr>
				<td>Saturday</td><td>10:00pm - Late</td>
		</tr>
		<tr>
				<td>Sunday</td><td>12:00pm - Late</td>
		</tr>
	</table>
<!--Opening Hours-->
	
	<p> Summary of promos </p>
<!--Promo Info-->

	<div class="BG3"></div>
<!--BG3-->

	<footer>
		<p> insert some social media links etc </p>
	</footer>
<!--Footer-->

	</div>
</body>
</html>

CSS

html {
	height: 100%;
	margin: 0;
	width: 100%;
	overflow: auto;
}
/* HTML code */

header {
	font-size:3.5em;
}

h1 {
	text-align: center;
	font-size: 250%;
}
/*H1 style */

h2 {
	font-size: 130%;
}
/*H2 style */

table {
	border: 3px solid white;
	text-align: center;
	border-collapse: collapse;
}
/* tale style */

th {
	text-align: center;
	font-size:120%;
	border: 3px solid white;
	border-collapse:collapse;
}
/* Table Header style */

td {
	text-align: Left;
	border-left: 3px solid white;
	border-collapse: collapse;
}
/*table cell alignment */

p {
	font-size: 100%;
}
/*paragraph style */

.body {
	font:helvetica, serif;
	color: white;
	overflow:auto;
	background-color: black;
	font-family: Arial, Verdana;
	width: 100%;
	display: block;
	margin:auto;
	text-align: center;
	position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
/* Body style */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
}

.topnav {
	background-color: black;
	overflow:hidden;
	/* position:fixed; */
	/* height: 120px; */
  display: inline-flex;
	max-width: calc(100% - 120px);
}
/* Navbar style */

.topnav a {
	font:serif;
	float:left;
	color:white;
	text-align:center;
	padding: 12px 14px;
	text-decoration: none;
	font-size: 14px;
	height: auto;
	display: inline-block;
	vertical-align: top;
	line-height: auto;
  display: inline-flex;
	width: calc(20% - 10px);
  margin: 0 5px;
  white-space: nowrap;
}
/* Navbar component style */

.topnav a:hover {
  background-color: white;
  color: black;
}
/* Hover Navbar option */

.topnav a.active {
  background-color: white;
  color: black;
}
/* Active Navbar option */

.BG1 {
  background-image: url('CNRTap2.jpg');
  height: 80%; 
  width:100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Background 1 */

.BG2 {
  background-image: url('CNRPizza1.jpg');
  height: 80%; 
  width:100%;
 ...