Делаю не большое меню на jquery. Идея заключается в простой подмени классов при клике на пункте меню(чтобы подсвечивать выбранный пункт) ДЕлаю так
| Код |
li {
display: list-item;
}
fieldset, img {
border: 0;
}
ol, ul {
list-style: none;
}
#primary_nav {
background: transparent;
font-size: 1em;
border-bottom: 0px solid #11b3e4;
padding-left: 7%;
margin: 45px 0 2px 0;
height: 28px;
}
#primary_nav ul li, #primary_nav ul li a {
color: #D9D9D9;
text-decoration: none;
}
#primary_nav ul li {
background: transparent url(../img/tab_left2.png) no-repeat top left;
font-size: 1em;
font-weight: normal;
padding: 0;
margin: 0px 0px auto 5px;
position: relative;
}
#primary_nav ul li.active {
background: transparent url(../img/tab_left.png) no-repeat top left;
font-size: 1em;
font-weight: bold;
padding: 0;
margin: 0px 0px auto 5px;
position: relative;
}
#primary_nav ul li.active a {
background: transparent url(../img/tab_right.png) no-repeat top right;
padding: 8px 13px 8px 8px;
margin-left: 6px;
display: block;
}
#primary_nav ul li a {
background: transparent url(../img/tab_right2.png) no-repeat top right;
padding: 8px 13px 8px 8px;
margin-left: 6px;
display: block;
}
}
.right {
float: right;
}
.left {
float: left;
}
.hide {
display: none;
}
|
| Код |
<script>
$(document).ready(function(){
$("#primary_nav #nav").click(function(){
$("#primary_nav #nav").removeClass('active');
$(this).addClass('active');
});
});
</script>
|
| Код |
<html>
<head>
<title>Сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type='text/javascript' src='js/menu.js'></script>
</head>
<body>
<div id="primary_nav">
<ul>
<li id="nav" class="left "><a href="#page=news" >1 пункт</a></li>
</ul>
<ul>
<li id="nav" class="left "><a href="#page=about" >2 пункт</a></li>
</ul>
<ul>
<li id="nav" class="left "><a href="#page=contact" >3 пункт</a></li>
</ul>
</div>
</body>
</html>
|
все работает прикрасно. Но если страница перезагружается то выделение с пункта меню естественно слитает. Как можно определить что если например мы зашли на страницу http://mysayt/#page=about второй пункт должен принять класс acvtive и стать подсвеченным. Пробовал вот так
| Код |
var active = $(#primary_nav #nav a).attr("href");
var hash = location.hash;
if (active == hash) {$("#primary_nav #nav").addClass('active');}
|
Но в переменной active всегда значение 1 пункта и ни чего не работает (((( |