Javascript 基于if语句显示div_Javascript

Javascript 基于if语句显示div

javascript

Javascript 基于if语句显示div,javascript,Javascript,我正试图使用这段代码来隐藏或显示基于url参数“direction”的div，我无法让它工作，不知道是否有更好的方法。示例url=-谢谢 <head> <script type="text/javascript"> function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(wind

我正试图使用这段代码来隐藏或显示基于url参数“direction”的div，我无法让它工作，不知道是否有更好的方法。示例url=-谢谢

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


函数getUrlVars（）
{
var vars=[]，散列；
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i

您丢失了一个$（文档）。准备就绪
（如果使用jQuery）或窗口。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中
示例：
可能在if/else语句中，您需要显示和隐藏另一个div，以便在每个条件中显示正确的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'; 
}

对于纯javascript方法，您甚至需要添加change the window.onload来运行代码-这确保了DOM元素可以运行代码：

函数getUrlVars（）{
var vars=[]，
搞砸
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i

创建一个函数，并将其分配给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>


函数getUrlVars（）
{
var vars=[]，散列；
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i

？发生了什么意外情况？您使用的是JavaScript还是jQuery？我在你的代码中没有看到jQuery。无论url参数是什么，这两个div都会一直出现present@user1072100这是因为javascript是在div出现在页面上之前运行的。。。你需要把你的代码放在一个函数中，并在页面加载后调用该函数-见下面我的答案…+1希望你不介意我添加一个JSFIDLE-在那里是3/4，找到了你的答案…@ManseUK-一点也不介意，谢谢你的JSFIDLE慷慨@ipr101刚刚注意到OP将标记从jQuery更改为JavaScript，并评论说他们没有使用jQuery。。。我已经添加了一个基本的javascript版本。。。。

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