Если я правильно понял задачу то вам надо что-то вроде этого
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
padding: 0.5em 0;
}
li.active~li {
padding-left: 1em;
}
</style>
</head>
<body>
<ul id="main">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
</ul>
<script>
var currentListItem;
document.getElementById('main').addEventListener('click', function(e){
if ( e.target.nodeName.toLowerCase() != "a" ) return;
e.preventDefault();
var listItem = e.target.parentNode;
if ( currentListItem ) currentListItem.className = (" " + currentListItem.className + " ").replace(" active ", " ").trim();
if ( currentListItem === listItem ) return;
listItem.className = (listItem.className + " active").trim();
currentListItem = listItem;
}, false);
</script>
</body>
</html>