Вот бесплатный хостинг - работает.
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
header { padding: 100px 0 0 0; display: block; }
header h1 { width: 960px; margin: 0 auto; }
a { color: #eee; }
a:hover { color: white; }
.nav-wrap {
width:110px;
background-color: rgba(0,0,0,0.6);
border:2px solid black;
}
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 300px; }
*:first-child+html .group { zoom: 1; } /* IE7 */
#example-one {
list-style: none;
position: relative;
width: 110px;
height:300px;
}
#example-one li {
display: inline-block;
}
#example-one a {
width:110px;
color: #bbb;
top:0;
font-size: 14px;
display: block;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#example-one a:active {
color: red;
}
#magic-line{
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 26px;
background: #fe4902;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $el, topPos, newHeight; //Записали переменные
$("#example-one").append("<li id='magic-line'></li>"); //Добавили элемент списка <li> в <ul>, по id#example-one
var $magicLine = $("#magic-line"); //Записали его/Дали ему атрибуты "<li>"
$magicLine
.width($("#magic-line").width()) //Задали ему ширину из файла css style.css
.height($("#magic-line").height()) //Задали ему высоту из файла css style.css
.css("top", $("#magic-line").position().top) //Взяли его положение относительно top из style.css
.data("origTop", $magicLine.position().top) //Запомнили это положение и дали ему имя origTop
.data("origHeight", $magicLine.height()); //Запомнили высоту магической линии дали имя origHeight
$("#example-one li").find("a").hover(function() { //В селекторе #exapmle-one li нашли дескриптор <a> задали ему функцию при наведении
$el = $(this); //Присвоили переменной $el значения фунции (родителя)
topPos = $el.position().top; //задали переменной topPos позицию описанную в style.css от селектора #magic-line
newHeight = $el.parent().height(); //тоже самое что и с topPos только по высоте, запись .parent() не понимаю, ведь у $el и так родитель селектор из css - #magic-line
$magicLine.stop().animate({ //останавливает анимацию в том положении в котором сейчас находится созданный дескриптор <li> (я так вижу)
top: topPos,
height: newHeight //это просто данные высоты и положения от верха дескриптора <ul> (как я понимаю)
});
}, function() {
$magicLine.stop().animate({ //
top: $magicLine.data("origTop"), //Функция возвращает слайдер в исходное положение, координаты которого заданны
height: $magicLine.data("origHeight") //
});
});
$("#example-one li").find("a").click(function() {
topPos = $(this).position().top;
newHeight = $(this).parent().height();
$magicLine.stop().animate({ //ВОПРОС ТУТ: как указать координаты активной ссылки
top: topPos,
height: newHeight
});
});
});
</script>
</head>
<body>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#bt">Buy Tickets</a></li>
<li><a href="#gs">Group Sales</a></li>
<li><a href="#rv">Reviews</a></li>
<li><a href="#ts">The Show</a></li>
<li><a href="#vo">Videos</a></li>
<li><a href="#ph">Photos</a></li>
<li><a href="#ms">Magic Shop</a></li>
</ul>
</div>
<div id="bt" class="selected_div"></div>
</body>
</html>