How to open a hidden div when a hash is on the URL?

后端 未结 3 1807
孤城傲影
孤城傲影 2021-01-13 19:55

I\'m using this javascript code to have a couple \"show/hide\" toggled divs on my site:



        
相关标签:
3条回答
  • 2021-01-13 20:27

    This is not the javascript answer that you want, but you could try playing around with the :target pseudo selector. For instance,

    <!-- HTML -->
    <div id="foo">show this with #foo.</div>
    <div id="bar">#bar shows this.</div>
    
    <style type="text/css">
        div {display: none}
        :target {display: block}
    </style>
    

    Example: http://jsfiddle.net/ZAHns/4/ (thanks to Jared for the idea of adding the anchors).

    Depending on what you are trying to do, this could possibly work, but think your requirements through.

    Note: Take this response with a HUGE grain of salt -- don't use it.


    To answer the actual question, use the following to determine if the hash is present:

    var in_hash = location.hash.slice(1) === what_you_are_looking_for;
    if (in_hash) ? /* IN HASH */ : /* NOT IN HASH */;
    
    0 讨论(0)
  • 2021-01-13 20:45

    Others have answered the URL hash part, I'll just comment on the script:

    > <script language="javascript">  
    

    The language attribute is deprecated, type is required, so:

    <script type="text/javascript">
    
    > function toggledean() {
    >     var ele = document.getElementById("toggleTextdean");
    >     var text = document.getElementById("displayTextdean");
    > 
    >     if(ele.style.display == "block") {
    

    The default display property is '' (empty string) unless you have set it to "block" previously.

    >         ele.style.display = "none";
    >         text.innerHTML = "Show more";
    >     } else {
    >         ele.style.display = 'block';
    >         text.innerHTML = 'Hide';
    >     }
    

    Given the very high probability that the div will have a display value of '' when first loaded, you are much better off testing for style.display = 'none', so:

    if (ele.style.display == 'none') {
        ele.style.display = '';
        text.innerHTML = 'Hide';
    
    } else {
        ele.style.display = 'none';
        text.innerHTML = 'Show more';
    }
    
    0 讨论(0)
  • 2021-01-13 20:46

    Something like this should work:

    <script>
        var hash = window.location.hash.replace('#', '');
        if (hash) {
            document.getElementById(hash).style.display = 'block'
        }
    </script>
    

    If you've only got the one element, like your script has, you could just call the function to toggle it if any hash exists in the url:

    <script type="text/javascript"> 
       function toggledean() {
        ...
        } 
        if (window.location.hash == '#dean') toggledean(); 
    </script>
    

    Or you could make your toggle script a little more universal:

    <script type="text/javascript"> 
    
    var hash = window.location.hash.replace('#', '');   
    
    function toggle (elementPartial) {
    
        var ele = document.getElementById('toggleText'+elementPartial);
        var text = document.getElementById('displayText'+elementPartial);
        if(ele.style.display == 'block') {
            ele.style.display = 'none';
            text.innerHTML = 'Show more';
        } else {
            ele.style.display = 'block';
            text.innerHTML = 'Hide';
        }
    } 
    
    if (hash) {
        toggle(hash); 
    }
    
    </script>
    

    Additionally, you could make this a little simpler and more flexible using a javascript framework, like jQuery.

    0 讨论(0)
提交回复
热议问题