VPF::меню на jquery - Форум программистов

MrDmitry

Дата 1.5.2011, 00:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Делаю не большое меню на 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 пункта и ни чего не работает ((((

Это сообщение отредактировал(а) MrDmitry - 1.5.2011, 13:30

almagnit

Дата 1.5.2011, 01:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 3.4.2008

Репутация: нет
Всего: 7

Вместо:

Код

ar active  = $(#primary_nav #nav a).attr("href");
                 var hash = location.hash;
                 if (active == hash) {$("#primary_nav #nav").addClass('active');}

Это:

Код

$("a[href=" + location.hash + "]").addClass('active');

MrDmitry

Дата 1.5.2011, 12:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Прикол в том что менять класс нужно не у тега <a> а у

Код


<li id="nav" class="left ">

Код


$("a[href=" + location.hash + "]").addClass('active');

Результата не дало

нуп

Дата 1.5.2011, 14:22 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 13
Всего: 33

Код


$("a[href=" + location.hash + "]").parent().addClass('active');

MrDmitry

Дата 1.5.2011, 14:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Спасибо то что надо ))

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »