Использование data-filter
Имеется ссылка на страницу ALL на этой страницы присутствуют фильтры
<ul id="filters"> <li><a href="#" data-filter="*" class="selected">Все</a></li> <li><a class="" href="#"data-filter=".Br">Бр</a></li> <li><a class="" href="#"data-filter=".Mu">Му</a></li> <li><a class="" href="#"data-filter=".fot">Фот</a></li> </ul> Суть вопроса, как можно переходить по ссылке сразу с активным фильтром, к примеру .Mu ? |
Цитата:
<ul id="filters"> <li><a href="#" data-filter="*" class="selected">Все</a></li> <li><a class="" href="# "data-filter=".Br">Бр</a></li> <li><a class="" href="# "data-filter=".Mu" id="Mu">Му</a></li> <li><a class="" href="# "data-filter=".fot">Фот</a></li> </ul> <a href="ALL.html#Mu">Перейти на MU</a> |
Что то не работает.
|
AdDa, все работает
ссылка на одной странице, список на другой |
Добрый день.
Помогите и мне. Делаю сайт по шаблону. На странице каталога есть фильтр по категориям. Как мне перейти с главной страницы сайта на определенную категорию? Пробовал на примере id=divan, как предлагали выше, но не работает:( Фильтр каталога следующий: <ul class="gallerynav">
<li class="selected-1"><a href="#" data-value="all">Все</a></li>
<li><a href="#" data-value="divan" id="divan">ДИВАНЫ</a></li>
<li><a href="#" data-value="uglovoi">УГЛОВЫЕ ДИВАНЫ</a></li>
и т.д.
</ul>
На главной странице: <div id="podkategoria1"> <div class="divan-clic"><a href="catalog.html#divan"></a></div> <div class="uglovoi"><a href="catalog.html"></a></div> и т.д. </div> Вот сам ресурс Спасибо! |
Спасибо, рони
Решается с помощью $(function(){
var hash = location.hash.substr(1)
$('[data-value="'+hash+'"]').click();
});
|
Цитата:
|
Нафига козе баян. Нарисуй страницы на каждый вид услуг и пусть все загружается как обычно. А потом уже добавь скрипт и события на все ссылки и по нажатию на ссылку загружай содержание в один и тот же контейнер. Так у тебя будет 7 страниц с 7-ю семантическими ядрами как говорят опездалы от поисковой оптимизации, а сейчас у тебя одна страница сразу обо всем, что не очень хорошо для ПС и вообще нафига козе баян.
По крайней мере к ссылкам добавь какие-то различия в хэши. ЗЫ Как вообще люди берутся рисовать сайты не бельмеса в самом элементарном. ))) |
Какую еще блин кнопку? У тебя меню услуг отражает разделы страницы Услуги, то есть заголовки. В норме, если нажать на Услуги (или что там), должна загрузиться вся эта страница или ее toc - table of content, то есть оглавления, которые у тебя уже нарисованы как выпадающая
Задолбали. Думать надо на русском языке, а не на жабе скрипучей. Зачем ты дублируешь оглавление на странице услуг, если оно эквипенисуально доступно с глобального меню? Оставь что-то одно. Лучше всего выкинь это выпадающее. Юзер нажмет услуги, получит оглавления, начнет нажимать слева, справа будет загружаться. Все просто и ясно и не надо ничего мудрить. ПС (поисковая система) зайдет на сайт - тоже "нажмет" на услуги, получит оглавления и проиндексирует все страницы. Если хочешь оставить менюху, то придется запретить нажимать на корень, чтобы нажимали только на пункты меню и получали соответствующую страницу. Иначе тебе придется выдать все оглавления и весь контент - согласно нажатию на TOC - чего ты сейчас и добился и запутался нахрен. |
То есть задача показывать разделы услуг без перезагрузки страницы и задача организовать интерфейс - это две разные задачи. Когда у тебя интерфейс сделан, ты можешь перехватить нажатие на любую ссылку на странице и загрузить что угодно куда хочешь.
Но если ты захочешь загрузить все сразу, а потом тупо скрывать/раскрывать, то у тебя будет каша в индексации, а не то самое ядро, поскольку ПС клал на твои скрипты, он видит только html и стили. То есть сделать священный тег h1 для заголовка и сделать не менее священный title для страницы вида услуг, ты не сможешь. У тебя не будет h1 и название страницы будет унылое чуть более чем полностью - услуги. |
Тут мы выходим на кошерную технологию известную как: человеку - человеческое, роботу - работа. Сделав нормальный интерфейс в стиле олд-скул, то есть с перезагрузкой сайта для открытия запрошенной ссылки, ты дописываешь скрипт, который тупо развешивает листенеры на все нужные ссылки или на их родителя, если они в куче. Например, абстрактно:
var a=document.querySelectorAll('a.type-ajax');
for(var i=0;i<a.length;i++)
a[i].addEventListener('click',
function(e){
e.preventDefault(); /* стопе */
ajax({
url:this.href,
success:function(data){
some_elem.innerHTML=data.html;
}
});
}
);
Но тогда у тебя все ссылки будут загружаться без изменения адреса. Если это николебет, а если колебет, то надо юзать history, который легко заделать под небольшой обхект var HistoryStates=function(){
var
page={url:location.href,title:D.title},
onpopstate=function(e){
location.assign(e.state.url);
};
this.restore=function(){
D.title=page.title;
history.replaceState(page,page.title,page.url);
},
this.push=function(data){
D.title=data.title;
history.pushState({'url':data.url},data.title,data.url);
};
history.replaceState(page,page.title,page.url);
W.onpopstate=onpopstate;
};
И тогда предыдущая функция станет такой var hs= new HistoryStates();
var a=document.querySelectorAll('a.type-ajax');
for(var i=0;i<a.length;i++)
a[i].addEventListener('click',
function(e){
e.preventDefault(); /* стопе */
ajax({
url:this.href,
success:function(data){
some_elem.innerHTML=data.html;
/* в data должен быть .title этой страницы */
hs.push(data);
}
});
}
);
Но это еще не все. Откуда взять some_elem если кто-то нажал на пункт выпадающего меню? Его придется создать, то есть просто вставить в body элемент, получить его в переменную some_elem и показать поверх текущего контента в рамочке или сплошняком. А чтобы юзер не давил кнопку Назад желая выбраться из услуг, придется нарисовать кнопку Закрыть, где-то рядом с some_elem и повесить на нее скрытие окна и возврат к начальному адресу: hs.restore() Понял как все просто? ))) Фишка тут простая. Контент грузится, адрес менятся, но страница не перезагружается. Но если нажать F5, или кнопку обновить, то все содержание загрузится обычным путем по текущему адресу. То есть и людям и роботам хорошо. |
| Часовой пояс GMT +3, время: 09:31. |