Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
#1

Выделение выбранного пункта меню

11.05.2016, 21:52. Просмотров 994. Ответов 12
Метки нет (Все метки)

Здравствуйте. Есть такой код
HTML5
1
2
3
4
5
6
7
8
9
<div id="navigation">
            <ul>
                <li><a href="/copyright/admin/index.php" class="active"><span>Главная</span></a></li>
                <li><a href="/copyright/admin/struct/article_add.php"><span>Добавить новую статью</span></a></li>
                <li><a href="#"><span>Пользователи</span></a></li>
                <li><a href="#"><span>Статистика</span></a></li>
                <li><a href="#"><span>Настройка</span></a></li>
            </ul>
        </div>

Вот css к нему:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#navigation { height:36px;}
#navigation ul{ list-style-type: none;}
#navigation ul li{ float:left; display:inline; margin-right:2px;}
#navigation ul li a,
#navigation ul li a span { float:left; height:36px; background:url(images/tab.gif) no-repeat 0 0; padding:0 0 0 15px;}
#navigation ul li a span { background-position:right 0; padding:0 15px 0 0;}
#navigation ul li a { line-height:36px; color:#907525; text-decoration: none; }
 
#navigation ul li a.active,
#navigation ul li a:hover { background-position:0 bottom;}
 
#navigation ul li a.active span,
#navigation ul li a:hover span{ background-position:right bottom;}
 
#navigation ul li a.active { font-size:12px; font-weight: bold; color:#887e42; }
Вся проблема в том, что у меня только "Главная" выделяется особым цветом, в отличие от остальных. Даже если я перейду, например, на "Добавить новую статью", подсвечено будет только "Главная". При наведении выделение работает, а вот после клика нет... В чем проблема? active ведь прописан
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.05.2016, 21:52
Ответы с готовыми решениями:

Выделение пункта меню при наведении - только текст или весь блок пункта
Всем привет.Есть меню, при наведении появляется hover но он идет строго по...

Выделение пункта меню
Хочу сделать такое как на этом сайте при наведении мышкой на Пункт - Главная,...

Выделение активного пункта меню
Всем доброго времени суток, приношу свои извинения, если это уже обсуждалось,...

выделение активного пункта меню
Есть данное меню. &lt;div id=&quot;menu&quot;&gt; &lt;ul&gt; &lt;li class=&quot;current&quot;&gt;&lt;a...

Выделение активного пункта меню
Вопрос простой. Как мне сделать активный пункт меню? Нужно это для класса...

12
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
11.05.2016, 21:57 #2
Для каждой страницы свой active.
1
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
11.05.2016, 22:03  [ТС] #3
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
Для каждой страницы свой active.
Эм, так как мне быть в итоге? Каждый раз подключать css-файл для новой страницы? Или чет другое? А то во всем этом деле полный ноль)
0
Academik
650 / 433 / 168
Регистрация: 04.04.2013
Сообщений: 1,888
11.05.2016, 22:05 #4
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

FaNaT_96, через jquery это делается:
Javascript
1
2
3
4
5
6
7
$(document).ready(function() { 
      var url=document.location.href;
 
       $.each($("#navigation ul li a"),function(e){
        if(url==this.href){$(this).addClass('active');};
    });
});
Источник
1
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
11.05.2016, 22:30  [ТС] #5
Выделение добавляется, но при этом оно остается и у предыдущих страниц, на которых я был. пытался присвоить ссылкам id и удалять класс, только вот безуспешно...

HTML5
1
2
3
4
5
6
7
8
9
<div id="navigation">
            <ul>
                <li><a href="/copyright/admin/index.php" class="active" id="a1"><span>Главная</span></a></li>
                <li><a href="/copyright/admin/struct/article_add.php"><span>Добавить новую статью</span></a></li>
                <li><a href="#"><span>Пользователи</span></a></li>
                <li><a href="#"><span>Статистика</span></a></li>
                <li><a href="#"><span>Настройка</span></a></li>
            </ul>
        </div>
Javascript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() { 
      var url=document.location.href;
 
       $.each($("#navigation ul li a"),function(e){
        if(url==this.href){
            $(this).addClass('active');
                        $("#a1").removeClass('active');
            };
    });
});
Только вот не работает.
0
Academik
650 / 433 / 168
Регистрация: 04.04.2013
Сообщений: 1,888
11.05.2016, 22:39 #6
FaNaT_96, из кода уберите присвоение класса .active у ссылок. Скрипт сам вешает класс на нужную ссылку.
0
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
11.05.2016, 22:49  [ТС] #7
Цитата Сообщение от Mr Coder Посмотреть сообщение
FaNaT_96, из кода уберите присвоение класса .active у ссылок. Скрипт сам вешает класс на нужную ссылку.
Вы про class="active"?
Это я удалил, но результат тот же.
При чем, если я перехожу с "Добавить новую статью" на "Главную", то с "Добавить новую статью" снимается выделение. А если обратно, то у главной оно остается
0
Academik
650 / 433 / 168
Регистрация: 04.04.2013
Сообщений: 1,888
11.05.2016, 23:15 #8
FaNaT_96, код рабочий, у себя проверил. Не пойму почему он у вас не работает.
0
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
11.05.2016, 23:34  [ТС] #9
Цитата Сообщение от Mr Coder Посмотреть сообщение
код рабочий, у себя проверил. Не пойму почему он у вас не работает.
А может сказываться, что я через include подключаю файл с вот этими ссылками?
0
Academik
650 / 433 / 168
Регистрация: 04.04.2013
Сообщений: 1,888
11.05.2016, 23:53 #10
Нет конечно. Подозреваю что нужно кэш сбросить. Попробуйте находясь на сайте нажать ctrl+f5.
0
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
12.05.2016, 00:00  [ТС] #11
Нет, тоже не помогло.
А может ли быть причина, что в файле index.php, который отвечает за "главную", подключен css, в котором описан active для navigation?
0
Academik
650 / 433 / 168
Регистрация: 04.04.2013
Сообщений: 1,888
12.05.2016, 00:04 #12
FaNaT_96, ну стиль то прописан, класса ведь нет изначально в исходном коде?
Откройте исходный код страницы через правый клик "Открыть исходный код" и посмотрите есть ли класс у ссылки.
1
FaNaT_96
18 / 18 / 15
Регистрация: 27.11.2013
Сообщений: 427
12.05.2016, 00:08  [ТС] #13
Notepad почему-то открыл не тот файл, поэтому и изменения не вступали в силу. Теперь все хорошо. Спасибо)
0
12.05.2016, 00:08
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.05.2016, 00:08

Выделение текущего пункта меню стрелкой
На этом сайте прямо под меню навигации есть линия, которая также работает как...

Выделение активного пункта меню цветом
Ребята, вот есть СSS с сайта, которым занимаюсь. Поскажите как выделить цветом...

Выделение пункта меню при прокрутке
http://webmix.info/ (не реклама). В общем при нажатии на пункт меню или при...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru