Develop Reference

Javascript Dropdown Staying open

In my site I made a simple dropdown menu, but my problem is that it won't close if mouseleave happens on the <span> that triggers the dropdown.
Here is my code:
//Find the dropdown span
var header = document.getElementById('drop');
//Find the ul with the links
var ul = document.getElementById('nav-dropdown');
//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";
//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";
var open = 0;
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
});
*/
/*Stylesheet for this stuff*/
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
text-decoration: none;
list-style: none;
}
a:visited {
color: white;
}
a,
#drop {
color: white;
}
a:hover {
color: coral;
}
.header-links-container {
position: relative;
top: 0;
background: rgb(63, 83, 95);
width: 100%;
height: 80px;
opacity: .8;
z-index: 999;
}
.title {
font-weight: bold;
font-size: 30px;
padding: 20px 50px;
position: relative;
float: left;
color: white;
}
.header-links {
position: relative;
float: right;
vertical-align: middle;
}
.nav-links {
margin: auto;
padding-top: 20px;
padding-right: 30px;
}
.nav-link {
position: relative;
float: right;
padding: 0 20px;
font-size: 23px;
padding: 5px 10px;
margin: 5px;
background: #4471ba;
border-radius: 7px;
}
.nav-link:hover {
background: #4480ba;
color: #d1d1d1;
}
#nav-dropdown {
display: none;
margin-top: 42px;
margin-left: 5px;
position: absolute;
}
.dropdown-link {
color: black;
background-color: #ccc;
padding: 5px 10px;
}
.dropdown-link:hover {
color: #000;
background-color: #a7a7a7;
}
.dropdown-link:active {
color: white;
background-color: #3b8cfa;
}
<div class="header-links-container">
<h2 class="title">Title</h2>
<div class="header-links">
<ul class="nav-links">
<li class="nav-link">Photo Gallery</li>
<li class="nav-link">SLAP</li>
<li id="drop" class="nav-link"><span>Dropdown</span></li>
<ul id="nav-dropdown" class="jim">
<a href="#">
<li class="dropdown-link">Link 1</li>
</a>
<a href="#">
<li class="dropdown-link">Link 2</li>
</a>
<a href="#">
<li class="dropdown-link">Longer Link</li>
</a>
<a href="#">
<li class="dropdown-link">Vacuum</li>
</a>
</ul>
</ul>
</div>
</div>
<p>
Relavent JS lines start at Line 16
</p>
And here is the fiddle that might make more sense: https://jsfiddle.net/dLw1hu5n/6/
I've tried closing the dropdown like in the last code block, but then it won't stay open when you go to hover over the links. I've also tried making the menu close when the mouse hovers over the navbar div, but no luck there either.
Can I fix this or do I need to start from square 1?

I would prefere to solve this via css. However, in your case you can try the following:
function displayDropdown() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
}
function hideDropdown() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
}
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
displayDropdown();
});
ul.addEventListener("mouseover", function() {
displayDropdown();
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
hideDropdown();
});
header.addEventListener("mouseleave", function() {
hideDropdown();
});

Your JS is fine but your event listener for mouseleave needs to be on the enclosing div. This way your element stays open until you hover outside of the header
t.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
What is t?
var t = document.getElementById(t);
What element has id T?
Try this fiddle to find out https://jsfiddle.net/dLw1hu5n/12/

html/css interactive calendar next/prev day button coding

I am using a tutorial I found online to fit my needs for a project. I would like to add in functional buttons that select between days (changing "active" days in calendar) and select between months.
My first question is how do I code the prev day and next day buttons to change the previous and next day to active according to css?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .prevDay {
float: left;
}
.month .next {
float: right;
padding-top: 10px;
}
.month .nextDay {
float: right;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size: 12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width: 720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
#media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
#media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
</style>
<style>
.pM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #cc9900;
background-color: #ffff00;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pM_button:hover {
background-color: #ffff00
}
.pM_button:active {
background-color: #ffcc00;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #9900cc;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nM_button:hover {
background-color: #9900cc
}
.nM_button:active {
background-color: #660066;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #ff0000;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nD_button:hover {
background-color: #ff0000
}
.nD_button:active {
background-color: #800000;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.pD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #33cc33;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pD_button:hover {
background-color: #33cc33
}
.pD_button:active {
background-color: #009900;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body onkeydown="GetKey()">
<div class=" month ">
<ul>
<li class="prev ">
<button class="pM_button ">Prev Month</button>
</li>
<li class="prevDay ">
<button class="pD_button ">Prev Day</button>
</li>
<li class="next ">
<button class="nM_button ">Next Month</button>
</li>"
<li class="nextDay ">
<button class="nD_button ">Next Day</button>
</li>
<li style="text-align:center ">
August
<br>
<span style="font-size:18px ">2016</span>
</li>
</ul>
</div>
<ul class="weekdays ">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days ">
<li><span class="active ">1</span>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
<script type="text/javascript ">
function GetKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
//var character = String.fromCharCode(code);
setTimeout('ShowTree(' + code + ');', 100);
}
function nextDay() {
}
function ShowTree(character, k) {
//Main Menu Key
if (character == 106) {
cWindow.close();
}
//Close Key
if (character == 111) {
alert(" Key: / ");
responsiveVoice.speak("Close ", "UK English Male ");
}
//PageUP Key, next month
if (character == 98) {
alert(" Key: 2 ");
responsiveVoice.speak("Page Up ", "UK English Male ");
}
//PageDOWN key, previous month
if (character == 99) {
alert(" Key: 3 ");
responsiveVoice.speak("Page Down ", "UK English Male ");
}
//Previous Key, Previous Day
if (character == 65) { //keypad key 101
responsiveVoice.speak("Previous ", "UK English Male ");
//alert(" Key: 5 ");
}
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
//Select Key
if (character == 83) { //keypad key 104
responsiveVoice.speak("Select ", "UK English Male ");
}
//alert(" Key: 8 ");
}
</script>
</body>
</html>

You can easily add the active class to any DOM element by using addClass("class") and remove the class with removeClass("class"), provided you're using jQuery.
So if you wish to mark the pD_button as active, you can do it like this with jQuery
$(".pD_button").addClass("active");
If you wish to accomplish this with vanilla JavaScript you would have to write your own functions that add and remove a class.
You could do that with
classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
or
className https://developer.mozilla.org/en-US/docs/Web/API/Element/className.
This approach is better than using the :active pseudo-class in CSS.
The :active pseudo-class is triggered when the mouse is being clicked, but only while the mouse button is held down. That means after you release the mouse click, :active is turned off. By using the approach mentioned above you just add another class when an onclick event happens to get the desired behavior.
var prevButton = $(".pD_button");
prevButton.on("click", function() {
if (!prevButton.hasClass("active")) {
prevButton.addClass("active");
} else /*if (prevButton.hasClass("active"))*/ {
prevButton.removeClass("active");
}
});
You can check it out here: https://jsfiddle.net/cqm26q1n/.
It is important that the .active in your CSS comes after the .pD_button class, so that it overwrites its CSS when the active class get's attached to it.
EDIT:
Use the approach I suggested combined with jQuery .keydown(handler):
var prevButton = $(".pD_button");
prevButton.on("keydown", function(e) {
if (e.which === 102 || e.which === 68) {
if (!prevButton.hasClass("active")) {
prevButton.addClass("active");
} else /*if (prevButton.hasClass("active"))*/ {
prevButton.removeClass("active");
}
}
});
Check the documentation of keydown here.

Assuming you are jQuery ( noticing presence of $ sign and .click event), There are couple of errors in this section you wrote.
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
More specifically in this like $(".pD_button ").click(.days.active++);
General jQuery event works like, $("SELECTOR").EVENT(CALLBACK_FUNCTION);
So, in your case, to go to next date, the code should be like
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(function(e){
$('ul.days').find("li.active").removeClass('active').next().addClass('active');
e.preventDefault();
});
//alert(" Key: 6 ");
}
Similarly, to go make previous date active, you just need to use .after() method instead of .next() at this line $('ul.days').find("li.active").removeClass('active').next().addClass('active');
To know more about jQuery .next() methods, check the links
https://api.jquery.com/click/ to know about .click event

How to keep class of a div after page reload

Hey guys I have a navigation Menu and so on everything works fine. I added a class with font-awesome arrow which toggles when I click on the different menu items. The Menu will be expanded when I click on a specific link, a javascript is comparing the URL. Unfortunately when I click on a link, the menu will be expanded but my class is getting into its default state. I couldn't figure out on which part in the code I have to make this work. I would appreciate any suggestions and hope that there is a solution without cookies or external scripts. As far as I know, when I change the code wheter only the first symbol changes or all symbols are changing but not one specific.
here is a working example on my hoster click
here is the page "two.html" clicked and I would like to have the symbol of the arrow on the expanded menu changed to the "up" class (default down)
heres the fiddle (removed code for example)
The html can be seen on the testsite
here is the javascript
$(document).ready( function() {
// initialize accordion
$('#Accordion ul').each( function() {
var currentURI = window.location.href;
var links = $('a', this);
var collapse = true;
for (var i = 0; i < links.size(); i++) {
var elem = links.eq(i);
var href = elem.attr('href');
var hrefLength = href.length;
var compareTo = currentURI.substr(-1*hrefLength);
if (href == compareTo) {
collapse = false;
$(elem).css({ 'background-color': '#a7a9ac', 'color': '#000' });
break;
}
};
if (collapse) {
$(this).hide();
}
});
$("#Accordion").delegate('div', 'click', function() {
$('#Accordion div').removeClass( "up" );
$('#Accordion div').addClass( "down" );
var ul = $(this).next('ul');
if (ul.is(':visible')) {
ul.slideUp(500);
} else {
$('#Accordion ul').not(ul).slideUp(500);
ul.slideDown(500);
var div = $(this)
$( this ).toggleClass( "up" );
}
});
});
and the css
#charset "utf-8";
/* CSS Document */
body {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
color: black;
background: #F8F8FF;
}
body,html {
margin: 0 auto;
padding: 0;
height:100%;
}
h2{margin-left:10px;padding-top:10px;}
p{padding-left:10px;}
body > #wrapper {height: auto; min-height: 100%;}
#wrapper {
width: 990px;
margin: auto;
padding: 0;
height:100%;
border-left:1px solid #a7a9ac;
border-right:1px solid #a7a9ac;
border-bottom:1px solid #a7a9ac;
-webkit-box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
background: url(inhalt.png) repeat-y center top fixed;
}
#header{
height:100px;
background:#363636;
color:silver;
font: 4em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
line-height: 120px;
padding: 0 20px;
}
#navi{
float:left;
background:#F8F8FF;
width:199px;
margin: 0;
padding: 0;
height:100%;
}
#text{
float:right;
width:760px;
padding-left:10px;
background:#F8F8FF;
}
#nav2 {list-style: none; padding: 5px 0 5px 0;text-align:center;margin:0;}
#foot a {vertical-align: -moz-middle-with-baseline; text-decoration: none; color:white;text-align:center;}
#foot li a:hover {text-decoration:underline;color:white;text-align:center;}
#foot {
color: white;
text-align: center;
background:#363636;
height:30px;
width:990px;
margin: 0 auto;
border:1px solid #363636;
clear:both;
}
.top{color:black;text-decoration:underline;}
.top:hover{color:red;text-decoration:underline;}
#Accordion,#Accordion ul{
list-style:none;
padding:0;
margin:0;
}
.cssmenu {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
width:100%;
}
.border{border-bottom:1px solid #a7a9ac;}
.bordertop{border-top:1px solid #a7a9ac;}
.cssmenu li a {
display: block;
padding: 5px 20px;
color: black;
text-decoration: none;
background:#DBDBDB;
}
.cssmenu ul li span{ display: block;
padding: 5px 20px;
background-color: #DBDBDB;
border-top:1px solid #a7a9ac;
cursor:pointer;
color:#000;
}
.cssmenu a:hover {
color: #FFF;
background-color:#363636;
}.cssmenu span:hover {
color: #FFF;
background-color:#363636;
}
.submenu li a {
display: block;
padding: 5px 40px;
color: black;
text-decoration: none;
background:#DBDBDB;
border-top:1px solid #a7a9ac;
}
#test{
}
.down{
}
.down::after {
content: '\f107';
color: black;
font-family: FontAwesome;
position: absolute;
margin-top: -20px;
margin-left: 170px;
}
.up{
}
.up::after {
content: '\f106';
color: black;
font-family: FontAwesome;
position: absolute;
margin-top: -20px;
margin-left: 170px;
}
Thank you in advance

If you wanted you can use Local Storage to remember the class applied to an element and re-apply it on refresh/re-load.
In JQuery it's something like this:
$(document).ready(function() {
if(localStorage.getItem("storageItemName")) {
$(target-element).addClass('myClass')
}
});
$(window).unload(function() {
localStorage.setItem("storageItemName", $(target-element).hasClass('myClass'));
});

There is no need here to use cookies or local storage since you don't need to persist data between pages.
I think the main problem here is that you're not toggling the up/down classes. You don't check to see whether the class is currently up or down when you click on the div therefore you're always setting the class of every div in the Accordion to down. Also you ONLY want to set the class of the div that was clicked on. Not every div in the Accordion ul. You should be doing something like:
$("#Accordion div").click(function() {
// Get the next ul that will be expanded/collapsed
var nextUL = $(this).next('ul');
// Is the current div already expanded?
if ($(this).hasClass("up")) {
// The current div is already expanded. Collapse it.
$(this).removeClass("up");
$(this).addClass("down");
nextUL.slideUp(500);
} else if ($(this).hasClass("down")) {
// The current div is currently collapsed. Expand it.
$(this).removeClass("down");
$(this).addClass("up");
nextUL.slideDown(500);
}
});

I got it!
I had to make the right If-query
if($(this).css('display') == 'block')
{
$(this).prev('div').removeClass( "down" );
$(this).prev('div').addClass( "up" );
}
here is the complete Javascript I hope someone could help this sometime.
With the actual script it remembers the link that had been clicked, it toggles the symbols when you click on the divs and the specific symbol of the expanded menu is changed on page refresh. Without cookies or local storage. Thank you for your help with a few ideas from you I got it this far.
$(document).ready( function() {
// initialize accordion
$('#Accordion ul').each( function() {
var currentURI = window.location.href;
var links = $('a', this);
var collapse = true;
for (var i = 0; i < links.size(); i++) {
var elem = links.eq(i);
var href = elem.attr('href');
var hrefLength = href.length;
var compareTo = currentURI.substr(-1*hrefLength);
var div = $(this);
if (href == compareTo) {
collapse = false;
$(elem).css({ 'background-color': '#a7a9ac', 'color': '#000' });
break;
}
};
if (collapse) {
$(this).hide();
}
if($(this).css('display') == 'block')
{
$(this).prev('div').removeClass( "down" );
$(this).prev('div').addClass( "up" );
}
});
$("#Accordion").delegate('div', 'click', function() {
$('#Accordion div').removeClass( "up" );
$('#Accordion div').addClass( "down" );
var ul = $(this).next('ul');
if (ul.is(':visible'))
{
ul.slideUp(500);
}
else
{
$('#Accordion ul').not(ul).slideUp(500);
ul.slideDown(500);
var div = $(this)
$( this ).toggleClass( "up" );
}
});
});
and here i have also an updated fiddle without useless code just the pure menu.

How can I make clickable list with sublinks ?

i am trying to make a clickable menu, and trying to make it toggle using javascript and css, but I want to make the each also to have sub-menus also toggle, and I trying to do it mainly with javascript, how can I make it?
Here is my code:
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">|||</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
<div class="child-dropdown">
Sublink 1
Sublink 1
Sublink 1
</div>
Link 3
<div class="child-dropdown">
Sublink 1
Sublink 1
Sublink 1
</div>
</div>
</div>
Javascript:
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
css
.dropbtn {
background-color: #cc0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
position:relative;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #e6e6e6;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e6e6e6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #cc0000}
.show {display:block;}

With the given markup, javascript would not be even necessary for links inside #myDropdown: you could just use :focus pseudoclass like so
#myDropdown a:focus + div {
display: block;
}
Of course this works as long as your link is focused: if you want to be able to have something else focused (or open many submenus) you could use a bit of javascript like
[].forEach.call(document.querySelectorAll('#myDropdown > a'), function(l) {
l.addEventListener('click', function() {
l.classList.toggle('open');
}, false);
});
or with event delegation on #myDropdown
document.getElementById('myDropdown').addEventListener('click', function(evt) {
var target = evt.target;
if (target.nodeName.toLowerCase() === 'a') {
target.classList.toggle('open');
}
}, false);
and this CSS
#myDropdown div { display: none; }
#myDropdown a.open + div { display: block; }
Codepen Demo

change color of current page angularjs

Does AngularJS help in any way with setting an active class on the link for the current page?
I imagine there is some magical way in angularjs or css this is done, but I can't seem to find.
My menu looks like:
<ul>
<li ><a href="#/person" ng-click = "person()" id="bl" >Person</a></li>
<li><a href="#/product" ng-click = "product()" id="or" >Product</a></li>
<li ><a href="#/place" ng-click = "place()" id="gr" >Place</a></li>
</ul><br/><br/>
my css looks like:
body {
font-family: Source Sans Pro;
}
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a{
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
#navbar li a.current {
background-color: #FFF;}
li {
display: inline;
}
#bl {
background-color:#5a5a5a;
color: yellow;
}
#or {
background-color:#5a5a5a;
color: yellow;
}
#gr {
background-color : #5a5a5a;
color: yellow;
}
#bl:hover ,#or:hover , #gr:hover {
background-color:#ff6900;
}
#persons{
float:left;
}
.left{
float:left;
}

Looks like you have functions person(), product(). Set background-color by using getElementsByName('body').style.backgroundColor = 'red'; and respective colors in respective functions.

You could use https://docs.angularjs.org/api/ngRoute/service/$route service to get/detect the current route and set some class in your li or a tag then use css to style them based on the class you set.