Jquery, ative o script se a hashtag no final do URL corresponder a um nome de classe
Ei pessoal. Estou usando um pouco de jQuery para fazer uma espécie ao vivo do meu portfólio quando várias categorias são selecionadas. Basicamente, o script corresponde ao conteúdo de um<li>
tag no clique (meu menu) com os nomes das classes de outros<li>
tags em outros lugares da página. O resultado é que os itens do portfólio que correspondem à navegação clicada mostrarão e ocultarão o restante. Uma espécie ao vivo. No entanto, quero adicionar a capacidade de adicionar um link permanente para ativar o jquery para classificar por uma hashtag no final. Por exemplo:work.html#category1
configuraria automaticamente o script para ocultar tudo, exceto a categoria um. Meu script e a configuração básica da página estão abaixo. Qualquer ajuda seria muito apreciada!
<script>
$(document).ready(function() {
$('#worknavwrap p a').click(function() {
$(this).css('outline','none');
$('ul#worknavwrap .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','_');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
</script>
<ul id="worknavwrap">
<li><a href="#category1">Category 1</a></li>
<li><a href="#category2">Category 2</a></li>
<li><a href="#category3">Category 3</a></li>
</ul>
<ul id="portfolio">
<li class="category1">Item 1</li>
<li class="category1">Item 2</li>
<li class="category2">Item 3</li>
<li class="category1">Item 4</li>
<li class="category3">Item 5</li>
<li class="category3">Item 6</li>
<li class="category2">Item 7</li>
<li class="category1">Item 8</li>
</ul>