[lemoral]

Имеется такого вида меню:

<div class="nav" id="mnu">		
		<ul class="menu">
			<li><a href="#" onClick="hideShowDiv1();return false;"><h4>Beauty</h4></a></li>
			<li><a href="#" onClick="hideShowDiv2();return false;"><h4>Room</h4></a></li>
			<li><a href="#" onClick="hideShowDiv3();return false;"><h4>Kitchen</h4></a></li>
		</ul>
	</div>

и такие стили:

.nav{ 
	display: block; 
	float: right; 
	z-index: 10000;
	margin-right: 50px;
}

.nav, .menu, .menu > li, .menu > li > a{ 
	height: 100%; 
	color: #FFFFFF;
	z-index: 10000;
}


.menu > li > a{
	display: block;
	padding: 42px 20px;
	text-decoration: none;
	font-weight: normal;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

.menu > li > a:hover, .menu > li > a:focus{
	background: #3e3e3e;
	color: #b4193b;	
	box-shadow: inset 0px 5px #b4193b;
	padding: 50px 20px 34px;
}


@media only screen and (max-width: 768px){
	.menu{
		background: #262626;;
		border-top: 2px solid #4e131c;
	}
	
	.menu, .menu > li, .menu > li > a{
		height: auto;
	}
	
	.logo{
		display: none;
	}

	.menu > li > a{
		padding: 15px 15px;
	}
	
	.title { 
		text-align: center;
			display: block;
	}

	.menu > li > a:hover, .menu > li > a:focus{
		background: #3e3e3e;
		box-shadow: inset 5px 0px #b4193b;
		padding: 15px 15px 15px 25px;
	}
	

@media only screen and (max-width: 768px){
	
	 #gallery{margin-top: 170px;}

	.menu { 
		display: block; 
		opacity: 1; 
		width: 100%; 
		position: absolute; 
		right: 0; 
		top:100px; 
	}
	.title { 
		text-align: center;
		display: block;
	}
	.menu > li { 
		display: block; 
		width: 100%; 
		margin: 0; 
}
	.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
}

@media only screen and (max-width: 479px){
	.title { 
		text-align: center;
		display: block;
	}

	.logo{
		display: none;
	}


footer {   
  height: 100px;
}

Каким образом можно сделать выделение активного пункта меню не через focus, а с помощью скрипта? Читал разнообразные примеры, не выходит....помогите, пожалуйста!