Question

我正在尝试通过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

Answer 1

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

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

1 个答案: