jQuery检查URL，然后显示和隐藏元素

嗨，我的页面上有多个滑块，我正在使用一个名为bxSlider的插件。在页面加载时，我隐藏了我所有的类newsarticle，但显示了第一个父级，正如你在下面的代码中看到的那样，我的滑块分为几年；2003年、2004年等

我把所有东西都放在一个页面上，因此像wwww.example1.com/year2004.html这样的URL不起作用，它会把我带到year2004滑块，但我知道我可以使用以下方法：

www.example1.com/index.html#2003_concorde

这会跳转到页面上的ID，这很好，因为它会将我引导到特定的故事，但是，如果我尝试跳转到以下URL，默认情况下我会隐藏其他滑块：

www.example1.com/index.html#2004_firefox或www.example1.com/index.html#year_2004

这也不会显示相应的div，因为它在jQuery默认情况下是隐藏的，只有当我使用HTML范围滑块时才会取消隐藏。

到目前为止我已经尝试了什么

 <script type="text/javascript">
      $(document).ready(function () {
     if(window.location.href.indexOf("#digitl2004")) {
       // hide elements
                $('.newsarticle').hide();
                  $('.most_popular_contents').hide();                
                //show elements
                $('#digitl2004').fadeIn('fast');
                  $('.news_content_2004').fadeIn('fast');               

                // bg image change
                var image = $('#maincontent');
                image.fadeOut('fast', function () {
                image.css('background-image','url(images/facebook.jpg)');
                image.fadeIn('fast');
                });    }
      });
 </script>

我上面要做的是检查已经输入的URL，如果URL存在#digital2004，那么我希望它如上所述隐藏元素。

然而，这并没有起到任何作用！我不是JS的专家，但我认为它可以像我上面尝试的那样工作，或者如果我可以让JS根据插入的URL更改滑块值，即如果digital2004在URL中，那么范围滑块值将更改为2004。

index.html

<div id="digitl2003" class="newsarticle year2003"> <!-- Start Year 2003 -->
    <div class="newsyear">
        <h2 class="timeline_year">2003</h2>
    </div> <!-- End Div News Year -->
        <ul class="bxslider">
            <li>
                <div class="newselement" id="2003_safari">
                <h3 class="timeline_heading">Safari Browser launched</h3>
                        <p class="timeline_content">On January 7th 2003, at Macworld in San Francisco, Steve Jobs announces that Apple are releasing their own web browser, Safari. Subsequent releases of the browser follow with the full version 1.0 release on June 23 2003.</p>
                        <p class="timeline_content">Source: <a href="http://en.wikipedia.org/wiki/Safari_browser#Safari_1" target="_blank">Wikipedia</a></p>
                            <div class="newsshareicons">
                               <div class="wrapper">
                                <img src="images/facebook_icon.png" id="2003_safari_share_fb" alt="Share on Facebook" title="Share on Facebook"/>
                                <a href="https://twitter.com/share?text=In%202003%20Steve%20Jobs%20announces%20that%20Apple%20are%20releasing%20their%20own%20browser%20Safari%20#DIGI.T.L." target="_blank"><img src="images/twitter_icon.png" id="2003_safari_share_twitter" alt="Share on Twitter" title="Share on Twitter"/></a>
                                <a href="http://www.linkedin.com/cws/share?url=http%3A%2F%2Fgoogle.com" target="_blank"><img src="images/linkedin_icon.png" id="2003_safari_share_linkedin" alt="Share on LinkedIn" title="Share on Linekdin"/></a>
                                <a href="https://plus.google.com/share?url=www.google.com" target="_blank"><img src="images/googleplus_icon.png" id="2003_safari_share_googleplus" alt="Share on Google+" title="Share on Google+"/></a>
                               </div> <!-- End Wrapper -->
                           </div> <!-- End News Share Icon --> 
                </div> <!-- End News Element -->
            </li>  <!-- End List -->
            <li>
                <div class="newselement" id="2003_concorde">
                <h3 class="timeline_heading">The end of Concorde</h3>
                        <p class="timeline_content">Concorde ends three decades of supersonic travel when, on 26th November 2003 the last Concorde lands at its new home at Filton Airfield; the airfield where it was built.</p>
                        <p class="timeline_content">Source: <a href="http://news.bbc.co.uk/1/hi/england/bristol/3238674.stm" target="_blank">BBC News</a></p>
                </div>
                  <div class="newsshareicons">
                        <div class="wrapper">
                            <img src="images/facebook_icon.png" id="2003_concorde_share_fb" alt="Share on Facebook" title="Share on Facebook"/>
                            <a href="https://twitter.com/share?text=Concorde%20ends%20three%20decades%20of%20supersonic%20travel%20on%2026th%20November%202003%20#DIGI.T.L." target="_blank"><img src="images/twitter_icon.png" id="2003_concorde_share_twitter" alt="Share on Twitter" title="Share on Twitter"/></a>
                            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                            <img src="images/linkedin_icon.png" id="2003_concorde_share_linkeidn" alt="Share on LinkedIn" title="Share on Linekdin"/>
                            <img src="images/googleplus_icon.png" id="2003_concorde_share_googleplus" alt="Share on Google+" title="Share on Google+"/>
                       </div> <!-- End Wrapper -->
                </div> <!-- End News Share Icon --> 
            </li>
            <li>
                <div class="newselement" id="2003_genome">
                <h3 class="timeline_heading">Human Genome Project completed</h3>
                        <p class="timeline_content">In April 2003 it is announced that the project to sequence the human genome is complete. The mapping is now close to 100% complete, with only very small gaps left which are considered too costly to fill in at this point.</p>
                        <p class="timeline_content">Source: <a href="http://news.bbc.co.uk/1/hi/sci/tech/2940601.stm" target="_blank">BBC News</a></p>
                </div>
                 <div class="newsshareicons">
                                <div class="wrapper">
                                <img src="images/facebook_icon.png" id="2003_genome_share_fb" alt="Share on Facebook" title="Share on Facebook"/>
                                <img src="images/twitter_icon.png" id="2003_genome_share_twitter" alt="Share on Twitter" title="Share on Twitter"/>
                                <img src="images/linkedin_icon.png" id="2003_genome_share_linkeidn" alt="Share on LinkedIn" title="Share on Linekdin"/>
                                <img src="images/googleplus_icon.png" id="2003_genome_share_googleplus" alt="Share on Google+" title="Share on Google+"/>
                               </div> <!-- End Wrapper -->
                </div> <!-- End News Share Icon --> 
            </li>
        </ul>
    </div><!-- End Year2003 -->

Js/Js.Js

 $('.newsarticle').hide();
 $('.newsarticle:first-child').show();

更新

当我使用点击事件如下：

它是有效的，但是如果没有点击事件，这将不起作用？不确定的原因

  <a href="#" id="link">change</a>
<script>
    $(function() {
        window.onhashchange = function () {
        }

        $('#link').click(function(e) {
            e.preventDefault();
            window.location.hash = 'digitl2004';
            // hide elements
                        $('.newsarticle').hide();  
                        $('.most_popular_contents').hide();                
                    //show elements
                        $('#digitl2004').fadeIn('fast');
                        $('.news_content_2004').fadeIn('fast');           
        });
    });
</script>