创建一个if else来显示基于url的替代div

时间:2018-12-21 20:30:09

标签: javascript html if-statement

我正在尝试通过if else语句来显示一个div或另一个基于url的语句,但它根本无法正常工作,只有一个div持续显示:

Div 1是唯一不断显示的内容,我已经尝试了许多变通方法:

    <script>
    if (window.location.href.indexOf("pink") > -1)
    {
    document.getElementById("div2").style.display="none";
    }
    else {
    document.getElementById("div1").style.display="none";
    }
    </script>

    <div id= "div2">
    <a id="link2" href="https://example2" target="_top"></a>
    </div>

    <div id= "div1">
    <a id="link1" href="https://example1" target="_top"></a>
    </div>

    <style>
    #link2
{
background: url(http://examplemy.com/wp-content/backtwo.PNG); 
background-repeat: no-repeat;
background-size:cover;
}
    #link1
    { 
background: url(http://examplemy.com/wp-content/backone.PNG); 
background-repeat: no-repeat;
background-size:cover;
            }
    html, body {width: 100%; height: 100%; margin: 0;}

我现在将脚本放在最后,但仍然无法正常工作。

另外,将我的站点usr作为examplemy / pink

1 个答案:

答案 0 :(得分:0)

该脚本在加载div之前正在运行。它无法找到它们;如果在加载此页面时将其打开,则可能会在开发控制台中看到错误。您应该将脚本移到div下方,或将代码放入窗口(window.addEventListener('load', function() { ... }))的加载事件的事件处理程序中,以使其在div加载之前不会运行。 (在这种情况下,您也可以使用DOMContentLoaded事件而不是普通加载事件,尽管这种情况鲜为人知。)