Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
FaNaT_96
18 / 18 / 3
Регистрация: 27.11.2013
Сообщений: 423
#1

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

11.05.2016, 21:52. Просмотров 444. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Выделение выбранного пункта меню (HTML, CSS):

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

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

выделение активного пункта меню - HTML, CSS
Есть данное меню. &lt;div id=&quot;menu&quot;&gt; &lt;ul&gt; &lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;http://www.cyberforum.ru/index.php&quot;&gt;Главная&lt;/a&gt;&lt;/li&gt; ...

Выделение активного пункта меню - HTML, CSS
Вопрос простой. Как мне сделать активный пункт меню? Нужно это для класса top-menu. HTML и CSS ниже. Заранее спасибо. &lt;!DOCTYPE html&gt; ...

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

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

12
Stas_Garcia
Ушел наливать чай
186 / 135 / 27
Регистрация: 02.03.2013
Сообщений: 652
11.05.2016, 21:57 #2
Для каждой страницы свой active.
1
FaNaT_96
18 / 18 / 3
Регистрация: 27.11.2013
Сообщений: 423
11.05.2016, 22:03  [ТС] #3
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
Для каждой страницы свой active.
Эм, так как мне быть в итоге? Каждый раз подключать css-файл для новой страницы? Или чет другое? А то во всем этом деле полный ноль)
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,568
11.05.2016, 22:05 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
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 / 3
Регистрация: 27.11.2013
Сообщений: 423
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
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,568
11.05.2016, 22:39 #6
FaNaT_96, из кода уберите присвоение класса .active у ссылок. Скрипт сам вешает класс на нужную ссылку.
0
FaNaT_96
18 / 18 / 3
Регистрация: 27.11.2013
Сообщений: 423
11.05.2016, 22:49  [ТС] #7
Цитата Сообщение от Mr Coder Посмотреть сообщение
FaNaT_96, из кода уберите присвоение класса .active у ссылок. Скрипт сам вешает класс на нужную ссылку.
Вы про class="active"?
Это я удалил, но результат тот же.
При чем, если я перехожу с "Добавить новую статью" на "Главную", то с "Добавить новую статью" снимается выделение. А если обратно, то у главной оно остается
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,568
11.05.2016, 23:15 #8
FaNaT_96, код рабочий, у себя проверил. Не пойму почему он у вас не работает.
0
FaNaT_96
18 / 18 / 3
Регистрация: 27.11.2013
Сообщений: 423
11.05.2016, 23:34  [ТС] #9
Цитата Сообщение от Mr Coder Посмотреть сообщение
код рабочий, у себя проверил. Не пойму почему он у вас не работает.
А может сказываться, что я через include подключаю файл с вот этими ссылками?
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,568
11.05.2016, 23:53 #10
Нет конечно. Подозреваю что нужно кэш сбросить. Попробуйте находясь на сайте нажать ctrl+f5.
0
FaNaT_96
18 / 18 / 3
Регистрация: 27.11.2013
Сообщений: 423
12.05.2016, 00:00  [ТС] #11
Нет, тоже не помогло.
А может ли быть причина, что в файле index.php, который отвечает за "главную", подключен css, в котором описан active для navigation?
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,568
12.05.2016, 00:04 #12
FaNaT_96, ну стиль то прописан, класса ведь нет изначально в исходном коде?
Откройте исходный код страницы через правый клик "Открыть исходный код" и посмотрите есть ли класс у ссылки.
1
FaNaT_96
18 / 18 / 3
Регистрация: 27.11.2013
Сообщений: 423
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
Привет! Вот еще темы с ответами:

Выделение пункта меню при прокрутке - HTML, CSS
http://webmix.info/ (не реклама). В общем при нажатии на пункт меню или при прокрутке к нему пункт меню меняет свой стиль. Как мне так же...

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

Выделение активного пункта меню. Нужен совет! - HTML, CSS
Доброго времени суток, форумчане! Я в принципе нуб в CSS, помогите решить задачу. Необходимо выделить активные пункты меню (выделяется...

Выделение пункта меню родителя выборе подменю - HTML, CSS
Подскажите, пожалуйста, как можно выделить пункт меню родителя при выборе любого пункта подменю? Например изменить фон для пункта Первый...


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

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

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