Question

HTML

   <nav>
    <ul>
        <li><a class="notDrop" href="#home">HOME</a></li>
        <li><a class="notDrop" href="guides.html">GUIDES</a></li>
        <li class="dropdown">
            <a class="dropbtn">BRANDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">NVIDIA</a>
                    <a href="#">INTEL</a>
                    <a href="#">CORSAIR</a>
                    <a href="#">SAMSUNG</a>
            <li class="dropdown">
                <a class="dropbtn">BUILDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">GAMING</a>
                    <a href="#">OFFICE</a>
                    <a href="#">SERVER</a>
                    <a href="#">MEDIACENTER</a>
                    </div>
            </li>
    </ul>
</nav>

CSS

    nav {
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

的Javascript

    window.onload = function mobile(){
    if( isMobile.any() ) {
        document.getElementById('nav').style.backgroundColor = "blue";
       alert('Mobile'); 
    }
}

但我无法改变颜色，我做错了什么？我管理改变身体的颜色，但我不能使用导航。

Answer 1

你使用了错误的javascript函数。 getElementsByTagName("nav")[0]是一个标记，而不是ID。

应该是getElementById("nav")而不是getElementsByTagName()

javascript将始终返回一个数组，无论使用[0]方法匹配元素的数量。因此，请使用{{1}}返回第一个。

Answer 2

您使用了document.getElementById，但您只有HTML5的nav标签。将id =“nav”添加到导航代码中。

祝你好运！

Answer 3

您的问题在于您使用的是getElementById，但尚未向您的导航栏提供ID。

解决此问题的最佳方法是在导航中添加ID，如下所示：

<nav id="top-nav">

你的js变成了：

document.getElementById('top-nav').style.backgroundColor = "blue";

Super Cool Handsome Gel Boy 给出的答案，虽然它会起作用是不切实际的，因为它会查找任何<nav>标记，因此如果您添加更多<nav>标记，或者移动它们，你将不得不重新编码你的JavaScript。

通过使用ID，javascript将始终定位到正确的<nav>。

使用javascript更改导航栏的颜色

3 个答案: