您好我的页面上有多个滑块，我使用的是名为bxSlider的插件。在页面加载时，我隐藏了所有课程newsarticle但显示了第一个父级，因为您可以在我的代码中看到下面的内容，我的滑块分为几年; 2003年，2004年等。
我在一个页面上拥有所有内容，因此诸如wwww.example1.com/year2004.html之类的URL无法使用到year2004滑块，但我知道我可以使用以下方法：
www.example1.com/index.html#2003_concorde
这会跳转到页面上的ID，这很棒，因为它会指引我查看特定的故事，但是如果我尝试跳转到以下网址，则默认隐藏其他滑块：
www.example1.com/index.html#2004_firefox或www.example1.com/index.html#year_2004
这不会显示相应的div，因为它默认是由jQuery隐藏的，只有在我使用HTML Range Slider时才会被取消隐藏。
<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存在＃digitl2004，那么我希望它隐藏上面的元素。
然而，这无济于事！我不是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();
当我使用点击事件时如下：
它有效但是没有点击事件这不起作用？不确定为什么
<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>
答案 0 :(得分：1)
if(window.location.href.indexOf("#digitl2004"))
应该是
if(window.location.hash==='#digitl2004')
因为它似乎是你关注的哈希。
更新代码
HTML
<a href="#digitl2004" class="pink">test link</a>
<div id="digitl2003" class="newsarticle year2003"> <!-- Start Year 2003 -->
...
</div>
<div id="digitl2004" class="newsarticle year2004"> <!-- Start Year 2004 -->
...
</div>
jquery的
function hash(th) {
var wh = window.location.hash;
if (!wh) { wh = th; }//set to href if !hash
if(wh==='#digitl2004') {//if hash ===
$('#maincontent').fadeOut('fast')//fade out image
.css('background-image','url(images/facebook.jpg)')//change background
.fadeIn('fast');//fade in image
}
if (wh) {//if wh exists
$(wh).fadeIn('fast')//fade in selected
.siblings('.newsarticle').fadeOut('fast');//fadeout siblings
}
}
hash();//inital run
$('.pink').on('click', function() {
var th = $(this).attr('href');//get href
hash(th);//send href
});
做了一个小提琴：http://jsfiddle.net/filever10/HyN76/
点击测试链接，使用#digitl2004哈希值进行尝试。