Javascript 导航到页面上的特定滑块元素

嗨，我的页面上有多个滑块，我正在使用一个名为的插件。在页面加载时，我隐藏了我所有的类

新闻文章

，但显示了第一个家长，正如您在下面看到的，我的滑块分为几年；2003年、2004年等

我将所有内容都放在一个页面上，因此像wwww.example1.com/year2004.html这样的URL不起作用，但我知道我可以使用以下方法：

www.example1.com/index.html#2003#u concorde

这会跳转到页面上的ID，这很好，但是如果我尝试跳转到以下URL，则默认情况下会隐藏其他滑块：

www.example1.com/index.html#2004#u firefox

或

www.example1.com/index.html#year#u 2004

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

是否有一种方法可以成功导航到页面上的隐藏元素？我需要插入一些JS逻辑来取消隐藏这些滑块吗

有人能给我一个通用的例子来说明这是如何工作的吗

提前感谢您的帮助

更新： 到目前为止我都试过了

---

您可以尝试以下插件来检测哈希更改：

我想您可能误解了我，我真正想要的是一种查询我的URL的方法，如果在指定的域之后有任何内容，则隐藏此内容并显示该内容。例如，感谢您提供更好的答案，因为您为我指出了一个好的方向。将研究现在，如果适合什么我需要将接受这一点answer@mdesdev首先，我用类

新闻文章

隐藏所有

div

，只显示第一个孩子，我使用范围滑块在年份之间导航，因为到目前为止，这只是一个单页设计。理想情况下，我希望能在URL www.example1.com/index#digilt2004中键入内容，它会再次隐藏所有新闻文章，并显示Digilt2004的ID是否朝着正确的方向发展？@mdesdev谢谢，但这不是我想要实现的目标。我希望jquery能够读取我的URL，并根据URL显示和隐藏内容，只要找到一个新值，它就会更改内容

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

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

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