Jquery，如果URL末尾的hashtag與類名匹配，則激活腳本

Question

嘿伙計。 當我選擇各種類別時，我正在使用一點點jQuery對我的投資組合進行實時排序。 基本上，腳本中的內容相匹配<li>上點擊標簽（我的菜單）與其他的類名<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();
}

它將找到具有與散列匹配的href屬性的<a>元素，並觸發其.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(' ','_');

Answer 2

如果你想要一個瘋狂的功能，以及能夠做你正在看的東西我建議有一個美味的燒烤。

http://benalman.com/projects/jquery-bbq-plugin/