JS显示/隐藏默认行为

Question

如何更改默认行为，以便只显示带有电影ID的div的内容？

的JavaScript：

window.addEventListener("hashchange", function() { 
    var targetDiv = $(location.hash); 
    if (!targetDiv.is(':visible')) { 
     $('.page').slideUp(); 
     targetDiv.slideDown(); 
    } else { 
     $('.page').slideUp(); 
    } 
}, false); 

JS小提琴：http://jsfiddle.net/s9cxjrmf/

我尝试添加display: none到div最初的页面，但是，由于它在启动时会隐藏一切显示，而不是一切都完全不解决我的问题。我只需要在页面加载时保持其功能，同时显示第一个div的内容。

Answer 1

添加此行

$('#films').show(); 

在你的脚本，以解决您的问题..

Answer 2

当你使用jQuery，使用jQuery的事件处理方式：

$(window).on("hashchange", function() { 
 
    var targetDiv = $(location.hash); 
 
    if (!targetDiv.is(':visible')) { 
 
     $('.page').slideUp(); 
 
     targetDiv.slideDown(); 
 
    } else { 
 
     $('.page').slideUp(); 
 
    } 
 
}).trigger('hashchange');

.page { 
 
    display: none; 
 
}

<ul> 
 
    <li><a href="#films" class="navLink">Films</a> 
 
    </li> 
 
    <li><a href="#tv_films" class="navLink">TV Films</a> 
 
    </li> 
 
    <li><a href="#tv_shows" class="navLink">TV Shows</a> 
 
    </li> 
 
    <li><a href="#special_events" class="navLink">Special Events</a> 
 
    </li> 
 
</ul> 
 
<div id="films" class="page"> 
 
    <img src="https://www.organicfacts.net/wp-content/uploads/2013/05/Banana21.jpg"> 
 
</div> 
 
<div id="tv_films" class="page"> 
 
    <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/12/no-bundle-deal.jpg"> 
 
</div> 
 
<div id="tv_shows" class="page"> 
 
    <img src="http://www.med-health.net/images/10416152/image001.jpg"> 
 
</div> 
 
<div id="special_events" class="page"> 
 
    <img src="http://ecx.images-amazon.com/images/I/41fqB7D6eNL._SX466_.jpg"> 
 
</div>

小提琴：http://jsfiddle.net/s9cxjrmf/2/

Answer 3

您可以使用jQuery的事件处理程序，并且可以触发事件加载，以便设置默认视图

$(window).on("hashchange", function() { 
    var targetDiv = $(location.hash).stop(true, true); 
    if (!targetDiv.is(':visible')) { 
     $('.page').not(targetDiv).slideUp(); 
     targetDiv.slideDown(); 
    } else { 
     $(window).slideUp(); 
    } 
}); 
if (location.hash) { 
    $(window).trigger('hashchange'); 
} 

Answer 4

您可以在加载页面时将散列值设置为films。这将在页面加载中显示films的内容。

添加

window.location.hash = 'films'; 

到你的Javascript。

Demo

window.location.hash = 'films'; 
 
window.addEventListener("hashchange", function() { 
 
    var targetDiv = $(location.hash); 
 
    if (!targetDiv.is(':visible')) { 
 
    $('.page').slideUp(); 
 
    targetDiv.slideDown(); 
 
    } else { 
 
    $('.page').slideUp(); 
 
    } 
 
}, false);

.page { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#films" class="navLink">Films</a> 
 

 
    </li> 
 
    <li><a href="#tv_films" class="navLink">TV Films</a> 
 

 
    </li> 
 
    <li><a href="#tv_shows" class="navLink">TV Shows</a> 
 

 
    </li> 
 
    <li><a href="#special_events" class="navLink">Special Events</a> 
 

 
    </li> 
 
</ul> 
 
<div id="films" class="page"> 
 
    <img src="https://www.organicfacts.net/wp-content/uploads/2013/05/Banana21.jpg"> 
 
</div> 
 
<div id="tv_films" class="page"> 
 
    <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/12/no-bundle-deal.jpg"> 
 
</div> 
 
<div id="tv_shows" class="page"> 
 
    <img src="http://www.med-health.net/images/10416152/image001.jpg"> 
 
</div> 
 
<div id="special_events" class="page"> 
 
    <img src="http://ecx.images-amazon.com/images/I/41fqB7D6eNL._SX466_.jpg"> 
 
</div>

编辑

您还可以使用CSS来显示在页面加载的部分。

#films { 
    display: block 
} 

Demo