I have a script which hides (display:none) certain divs in the list on page load. Div contents represents description of a book, and the whole list is some sort of bibliography. Every div has an id, for example, "div1", "div2" etc.
<ul>
<li><div class="hidden" id="div1"></li>
<li><div class="hidden" id="div1"></li>
...
</ul>
And there's another page with a menu, which consists of anchored links to every such a div:
<ul>
<li><a href="bibl.html#div1"></li>
<li><a href="bibl.html#div2"></li>
...
</ul>
I want the hidden div to autoexpand when the link on another page is clicked. I tried some window.location.href stuff, but to no avail - my JS is weak yet. As I understand the logic it should take the current url and check it for "#", then search for an element with the part to the right in the id attribute. Thanks a lot kind people.)
You can do something like this on the target page:
window.onload = function() {
var hash = window.location.hash; // would be "#div1" or something
if(hash != "") {
var id = hash.substr(1); // get rid of #
document.getElementById(id).style.display = 'block';
}
};
Essentially, you check on the page load whether the window's href has a hash attached to it. If it does, you find the <div>
and change the style display to block.
You can use the window.location.hash
to see the hash value. From there you can getElementById(hashValue)
and show it.
Thank you! I figured out you can add this
location.href = '#' + id;
and also have the page scrolled to the position of the referred div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.