导航到页面上的某个滑块元素

时间:2013-12-12 12:07:43

标签: javascript jquery html

您好我的页面上有多个滑块,我使用的是名为bxSlider的插件。在页面加载时,我隐藏了所有课程newsarticle但显示了第一个父级,因为您可以在下面看到我的滑块被分成几年; 2003年,2004年等。

我将所有内容放在一个页面上,因此诸如wwww.example1.com/year2004.html之类的网址无效,但我知道我可以使用以下方法:

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

这会跳转到页面上的ID,这很棒,但是如果我尝试跳转到以下网址时默认隐藏其他滑块:

www.example1.com/index.html#2004_firefoxwww.example1.com/index.html#year_2004

这不会显示相应的div,因为它默认是隐藏的,只有在我使用我的范围滑块时才会被取消隐藏。

有没有办法可以成功导航到我页面上的隐藏元素?我是否必须插入一些JS逻辑来取消隐藏这些滑块?

有人可能会给我一个如何运作的通用例子吗?

提前感谢任何帮助。

UPDATE:

到目前为止我尝试了什么

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

然而,这无济于事!我不是JS的专家,但我设想它可以按照我上面尝试的方式工作,或者如果我可以让JS根据插入的URL更改滑块值,即如果digitl2004在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();

1 个答案:

答案 0 :(得分:1)

您可以尝试使用以下插件来检测哈希更改:https://github.com/cowboy/jquery-hashchange