Question

当我通过URL导航到div时，我想显示div的内容。目前，Div内容显示在onclick上。

当使用带锚点的URL导航到主题目时，如何显示Div内容？

这是javascript

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
    $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
    $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});
</script>

这是我的HTML

<h2 class="acc_trigger"><a href="#">Some Title Goes Here</a></h2>
<div class="acc_container">
    <div class="block">
    <h3>Strap Line Goes here</h3>
         Text content goes here
    </div>
</div>

<h2 class="acc_trigger"><a href="#">Another title Goes Here</a></h2>
<div class="acc_container">
    <div class="block">
    <h3>Another Strap Line Goes here</h3>
         Some more text content goes here
    </div>
</div>

Answer 1

如果您正在使用哈希（例如url.com/page.html#otherStuff），请阅读location.hash

http://www.w3schools.com/jsref/prop_loc_hash.asp

如果您使用的是查询（例如url.com/page.html?otherStuff），请使用location.search

http://www.w3schools.com/jsref/prop_loc_search.asp

将代码放在要显示的DIV下方，以便创建元素。然后做一个简单的if(hash == "#otherStuff"){ /* Do stuff */ }在“Do stuff”中你只需要运行open函数。

Answer 2

收听hashchange对象上触发的window事件。那么你可以用它来展示div或做你想做的事。

有点像这样的东西;

<a href="#about">About</a>
<div id="mydiv_about" style="display:none">
</div>
<a href="#media">Media</a>
<div id="mydiv_media" style="display:none">
</div>

和一些javascript

window.addEventListener("hashchange", function(){
    document.getElementById("mydiv_"+document.location.hash.substr(1)).style.display="block";
},false);

//编辑更新以反映一个工作示例

如何在导航时打开Div？

2 个答案: