Question

您好，我遇到了问题，有人可以帮助我，我想在单击链接时更改 ul 位置。在媒体查询上我尝试了很多事情来做到这一点！这里的代码 html css

这是我的导航栏的html代码。

<nav>

    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
    </label>

    <a href="home.HTML"><img class="image-logo" src="./image/logo-.png" alt="logo" /></a>
    <ul id="ul">
        <li><a  href="#contact">  </a></li>
        <li><a  href="#join">  </a></li>
        <li><a  href="#Vision"> </a></li>
        <li><a  href="#service">  </a></li>
        <li><a  href="home.HTML">   </a></li>
    </ul>
</nav>

这是我在这部分页面的css

@media(max-width: 880px) {
    .checkbtn {
        display: block;
    }

    ul {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #fff;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;
    }

    nav ul li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    nav ul li a {
        font-size: 20px;
    }

    a:hover, {
        background: none;
        background: dodgerblue;
    }

    #ul a:active {
        left: 100px;
        background-color: #000000;
    }

    #check:checked~ul {
        left: 0;
    }
}

Answer 1

要动态更改位置，您可以使用 Javascript 或 jQuery。

document.getElementById("ul").style.left = "100px";

或者Jquery

$("#ul").css({left:x,top:y});

您的代码中有错误，您不能为 id 内的所有 a 提供相同的 li

您可以使用更改 li 的样式 li.active{ background:red; }

<li class="active"><a  href="#contact">  </a></li>

我想在 a 处于活动状态时更改 ul 元素？

1 个答案: