javascript - Expanding a hidden div by referring with an anchor from external page - Stack Overflow

admin管理员组

文章数量:1317906

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

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

• javascript
• anchor
• hidden

Share Improve this question Follow asked Jul 9, 2009 at 12:01 certainlyakeycertainlyakey 52011 gold badge77 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

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.

You can use the window.location.hash to see the hash value. From there you can getElementById(hashValue) and show it.

本文标签： javascriptExpanding a hidden div by referring with an anchor from external pageStack Overflow