Commit 0a89fbe3 authored by Zhai Zirun's avatar Zhai Zirun

got topbar to work

parent 859b8595
document.getElementById("custom-button").addEventListener("click", openTab(event, 'custom'));
document.getElementById("load-button").addEventListener("click", openTab(event, 'load'));
document.getElementById("custom-button").addEventListener("click", openCustomTab);
document.getElementById("load-button").addEventListener("click", openLoadTab);
function openCustomTab() {
var i, content, tablinks;
content = document.getElementsByClassName("content");
var i, tablinks;
document.getElementById("load").className = "content";
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
document.getElementById("load-button").className = "tablinks";
tablinks = document.getElementsByClassName("tablinks");
// tablinks = document.getElementsByClassName("tablinks-active");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// for (i = 0; i < tablinks.length; i++) {
// tablinks[i].className = tablinks[i].className.replace("-active", "");
// }
document.getElementById('custom').style.display = "block";
evt.currentTarget.className += " active";
document.getElementById("custom").className = "content-active";
document.getElementById("custom-button").className += "-active";
}
function openLoadTab() {
var i, content, tablinks;
content = document.getElementsByClassName("content");
var i, tablinks;
document.getElementById("custom").className = "content";
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
document.getElementById("custom-button").className = "tablinks";
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById('load').style.display = "block";
evt.currentTarget.className += " active";
document.getElementById("load").className = "content-active";
document.getElementById("load-button").className += "-active";
}
document.getElementById("custom-button").click();
\ No newline at end of file
......@@ -56,4 +56,4 @@ if (document) {
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("Submit").addEventListener("click", dietNumInit);
});
}
}
\ No newline at end of file
......@@ -5,7 +5,6 @@
<title> clickerance </title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="content.js"></script>
<script src="button.js"></script>
</head>
<body>
<header class="header">
......@@ -18,11 +17,12 @@
</header>
<div class="topbar">
<button class="tablinks" id="custom-button">Your preferences</button>
<button class="tablinks-active" id="custom-button">Your preferences</button>
<button class="tablinks" id="load-button">Get an order on us</button>
<script src="button.js"></script>
</div>
<div class="content" id="custom">
<div class="content-active" id="custom">
Dairy : <input type="checkbox" id="Dairy"><br>
Meat : <input type="checkbox" id="Meat"><br>
Corn : <input type="checkbox" id="Corn"><br>
......@@ -36,6 +36,5 @@
<div class="content" id="load">
blah
</div>
</body>
</html>
......@@ -16,7 +16,7 @@
}
body {
font-family: 'Nunito', sans-serif;
min-height: 430px;
min-height: 300px;
}
/* ----- header ----- */
......@@ -68,12 +68,12 @@ body {
font-family: 'Nunito', sans-serif;
}
.tab button:hover {
border-bottom: 3px solid #51C2A9;
.topbar button:hover {
border-bottom: 5px solid #51C2A9;
}
.topbar button.active {
border-bottom: 3px solid #51C2A9;
.topbar .tablinks-active {
border-bottom: 5px solid #51C2A9;
}
/* ----- main-window -----*/
......@@ -86,6 +86,16 @@ body {
min-height: 250px;
}
.content-active {
display: block;
padding: 6px 12px;
background: #f5f5f5;
border: 1px solid #adadad;
box-shadow: 0 0 3px #adadad;
min-height: 250px;
}
.nameWrapper___4c05X {
background-color: #ffffff;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment