Не нравятся результаты поиска? Попробуйте другой поиск!

Активная категория


     27.12.2013    Общие вопросы по вёрстке, Шаблоны (TPL)    1438

вопрос
Здравствуйте! Мне бы хотелось получить от Вас помощь в виде активной категории, то есть допустим есть две категории главная и каталог сайтов, когда пользователь на главной тогда ссылка допусти синяя, переходит в каталог сайтов и главная становится простой а каталог сайтов синим. Помогите его реализовать, все стили есть!
Пример
Активная категория
на главной

Активная категориязашел в каталог сайтов

Заранее благодарен!

Ответил: sadan


В шаблон:
[aviable=main]
<a href="/" class="blue">Главная</a>
<a  href="/main/" class="dark">Информация</a>
<a  href="/news/" class="dark">Новости</a>
[/aviable=main]
[category=1]
<a href="/" class="dark">Главная</a>
<a  href="/main/" class="blue">Информация</a>
<a  href="/news/" class="dark">Новости</a>
[/category]
[category=2]
<a href="/" class="dark">Главная</a>
<a  href="/main/" class="dark">Информация</a>
<a  href="/news/" class="blue">Новости</a>
[/category]


в css:
.blue {display: inline-block;margin-top: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px 10px;background: blue; color: white;} 
.dark {display: inline-block;margin-top: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px 10px;background: black; color: white;}

Комментарии пользователей (5)

psarovskiy
37 | 13

psarovskiy - 27 декабря 2013 21:25 - Юзер

например можно так

var url = document.location.href;
$.each($("#main-nav a"),function(){
     if(this.href==url){
        $(this).addClass('active');
     }
});


<ul id="main-nav">
    <li>
        <a href="/">Главная</a>
    </li>
    <li>
        <a href="/catalog">Каталог</a>
    </li>
</ul>


ссылке, которая ведет на страницу на которой находится юзер, присваивается класс active, в css производите настройку отображения

Gabbynt
10 | 7

Gabbynt - 27 декабря 2013 22:40 - Юзер

не понимаю все сделал а класс не добавляется, может где то ошибка?

Webmaster
9

41 | 12

Webmaster - 27 декабря 2013 22:43 - Юзер

Цитата: Gabbynt
класс не добавляется

А Вы как определяете что класс не добавляется, через исходный код?

Sander
1126

1638 | 1204

Sander - 28 декабря 2013 17:06 - Эксперт

<a href="/"[aviable=main] class="current"[/aviable]>Главная</a>
<a  href="/catalog/"[category=1] class="current"[/category]>Каталог сайтов</a>

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

Kolya groza morey
30

301 | 95

Kolya groza morey - 30 декабря 2013 14:59 - Юзер

Ответ которий дал Sander лучше, а то в ответе очень много дублирования кода

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы