Jquery,如果URL末尾的hashtag与类名匹配,则激活脚本

Question

嘿伙计.当我选择各种类别时,我正在使用一点点jQuery对我的投资组合进行实时排序.基本上,脚本将<li>click(我的菜单)上的<li>标签内容与页面上其他位置的其他标签的类名进行匹配.结果是投资组合项目与点击的导航匹配将显示并隐藏其余项目.实时排序.但是,我想添加一个永久链接来激活jquery的功能,以便在末尾按主题标签进行排序.例如:work.html#category1会自动设置脚本以隐藏除类别1之外的所有内容.我的脚本和基本页面设置如下.任何帮助将不胜感激!

 <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>

Answer 1

做这个:

if(window.location.hash) {
    $('#worknavwrap a[href=' + window.location.hash + ']').click();
}

它将找到<a>具有href与哈希匹配的属性的元素,并触发其.click()处理程序.

更好的是为<a>元素提供ID属性,如:

<ul id="worknavwrap">
    <li><a id="category1" href="#category1">Category 1</a></li>
    <li><a id="category2" href="#category2">Category 2</a></li>
    <li><a id="category3" href="#category3">Category 3</a></li>
</ul>

那么你可以这样做:

if(window.location.hash) {
    $(window.location.hash).click();
}

顺便说一下,为了使您的代码与HTML匹配,您需要:

$('#worknavwrap li a').click(function() {...

代替:

$('#worknavwrap p a').click(function() {...

并且:

var filterVal = $(this).text().toLowerCase().replace(' ','');

代替:

var filterVal = $(this).text().toLowerCase().replace(' ','_');