Question

我正在尝试使用此代码隐藏或显示基于url param“方向”的div我无法让它工作并想知道是否有更好的方法。示例网址= http://domain.com?direction=south&season=summer - 谢谢

<head>
<script type="text/javascript">

        function getUrlVars()
        {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        var myVal = getUrlVars()["direction"];


        if(myVal == "north") {

            document.getElementById('north').style.display = 'block'; 
        }else {

            document.getElementById('south').style.display = 'none'; 

        }
        </script>
        </head>

        <body>

        <div id="north">Some text</div>

        <div id="south">Some text</div>

        </body>

Answer 1

您错过了$(document).ready（如果您使用的是jQuery）或window.onload阻止 -

$(document).ready(function() {
    var myVal = getUrlVars()["direction"];

    if(myVal == "north") {
        document.getElementById('north').style.display = 'block'; 
    }else {
        document.getElementById('south').style.display = 'none'; 
    }
});

或没有jQuery -

window.onload = function() {
        var myVal = getUrlVars()["direction"];

        if(myVal == "north") {
            document.getElementById('north').style.display = 'block'; 
        }else {
            document.getElementById('south').style.display = 'none'; 
        }
}

当您尝试显示/隐藏div时，您的代码可能无法正常运行，因为div尚未加载到DOM中。

示例：http://jsfiddle.net/manseuk/RTrgN/1/

Answer 2

也许在if / else语句中你需要显示和隐藏另一个div，以便显示正确的div并且在每个条件中隐藏正确的一个？

if(myVal == "north") {
    document.getElementById('north').style.display = 'block'; 
    document.getElementById('south').style.display = 'none'; 
}else {
    document.getElementById('north').style.display = 'none'; 
    document.getElementById('south').style.display = 'block'; 
}

Answer 3

对于纯javascript方法，您需要添加更改window.onload事件以运行您的代码 - 这可确保DOM元素存在以运行您的代码：

http://jsfiddle.net/manseuk/RTrgN/2/

function getUrlVars() {
    var vars = [],
        hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function runMe() {

    var myVal = getUrlVars()["direction"];


    if (myVal == "north") {

        document.getElementById('north').style.display = 'block';
    } else {

        document.getElementById('south').style.display = 'none';

    };
}

window.onload = runMe; // run the code once the DOM is loaded

Answer 4

创建一个函数，并将其分配给body的onload事件。同时修复if中的样式。

<head>
<script type="text/javascript">

        function getUrlVars()
        {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        function myOnLoad()
        {
            var myVal = getUrlVars()["direction"];


            if(myVal == "north") {
                document.getElementById('north').style.display = 'block'; 
                document.getElementById('south').style.display = 'none';
            }else {
                document.getElementById('north').style.display = 'none'; 
                document.getElementById('south').style.display = 'block';
            }
        }
        </script>
        </head>

        <body onload="myOnLoad()">

        <div id="north">Some text</div>

        <div id="south">Some text</div>

    </body>

根据if语句显示div

4 个答案: