Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.02.2014, 12:41   #1
Serik2010
Пользователь
 
Регистрация: 26.05.2010
Сообщений: 26
Злость Изменение класса в соответствии с url

Приветствую всех! Такой вопрос. Есть меню - шапка.
Код:
<ul class="nav pull-right">
      <li class="current-page">
            <a href="index.php"><i class="icon-home"></i><br />Home</a>
      </li>
      <li>
            <a href="about.php"><i class="icon-user"></i><br />О нас</a>
      </li>
</ul>
Как видно class="current-page" делает определённый эффект на текущем пункте меню.

Как мне сделать проверку ну текущую страницу и устанавливать в соответствие этот class="current-page" к текущему пункту.

Сейчас это сделано дублированием ВСЕГО меню на каждую страницу с расстановкой последовательно class="current-page".

Хочу меню впихнуть в хедер и вызывать 1 раз, но мешает этот класс, Как быть?
Serik2010 вне форума Ответить с цитированием
Старый 13.02.2014, 17:59   #2
MaTBeu
Eclipse Foundation
Старожил
 
Аватар для MaTBeu
 
Регистрация: 19.09.2007
Сообщений: 2,619
По умолчанию

Цитата:
Сообщение от Serik2010 Посмотреть сообщение
Приветствую всех! Такой вопрос. Есть меню - шапка.
Код:
<ul class="nav pull-right">
      <li class="current-page">
            <a href="index.php"><i class="icon-home"></i><br />Home</a>
      </li>
      <li>
            <a href="about.php"><i class="icon-user"></i><br />О нас</a>
      </li>
</ul>
Как видно class="current-page" делает определённый эффект на текущем пункте меню.

Как мне сделать проверку ну текущую страницу и устанавливать в соответствие этот class="current-page" к текущему пункту.

Сейчас это сделано дублированием ВСЕГО меню на каждую страницу с расстановкой последовательно class="current-page".

Хочу меню впихнуть в хедер и вызывать 1 раз, но мешает этот класс, Как быть?
Если уж вы решили таким путем идти, то вот примерный код, как можно реализовать

Код:
<ul class="nav pull-right">
      <li class="current-page page-index">
            <a href="index.php"><i class="icon-home"></i><br />Home</a>
      </li>
      <li class="page-about">
            <a href="about.php"><i class="icon-user"></i><br />О нас</a>
      </li>
</ul>
Код:
<!-- jQuery нужен -->
<script type="text/javascript">
$(document).ready(function() {
   var current_location_parts = window.location.href.split('/'),
         page = current_location_parts[current_location_parts.length - 1].replace(/\.php.*/i, ''); // получаем последний кусок текущего URL и убираем .php и возможные параметры - получаем название

   $('.nav li').removeClass('current-page');
   $('.nav li.page-' + page).addClass('current-page');
});
</script>
P.S. с регулярным выражением мог напутать - поищите правильный, если не сработает
MaTBeu вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическое изменение размера формы в соответствии с размером экрана ru3000 Microsoft Office Excel 18 08.11.2021 10:16
изменение класса программы (или окна?) andrew_jr20 C# (си шарп) 3 08.08.2014 08:02
[C#] Изменение текста label1 из другого потока/класса GregRUS Помощь студентам 3 11.01.2012 09:24
Два класса у ссылки, изменение цвета fezilk25 HTML и CSS 1 21.09.2010 17:35
Изменение вида URL SoFuWa WordPress и другие CMS 2 12.05.2010 21:59