By default, the home tab is displaying blank as per the code below. Content will only appear when the product ordering tab is clicked. I initially implemented this logic in JavaScript, but encountered issues when trying to replicate it in jQuery. Can anyone assist with resolving this?
Additionally, can someone provide guidance on how to mark the selected tab with a different color like Blue when clicked?
function show_menu(elementId) {
document.getElementById("home").style.display = "none";
document.getElementById("id2").style.display = "none";
document.getElementById(elementId).style.display = "block"; }.wrapper {
margin: 0px auto 0px auto;
padding: 3px 0px 0px 0px;
width: 100%;
}
.container {
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
height: 500px;
background-color: white;
border: 1px solid green;
} ... <!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h2 align="center">Demo</h2>
<div class="menu_container">
<div class="menu_font" onclick="show_menu('home');">Home</div>
<div class="menu_font" onclick="show_menu('id2');">Product Ordering</div>
<div class="clear"></div>
</div> ...