Question

在激活/单击时，我想更改此nav的背景色，如何实现？使用CSS

    <div class="row container-fluid mainTabCon" style="width: 100%" style="">
      <ul class="nav nav-pills" style="margin: 0 auto; ">
         <li class="nav-item">
            <a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
         </li>
         <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
         </li>
      </ul>
    </div>

感谢帮助

Answer 1

将此脚本添加到正文或脚本文件的末尾：（来自w3学校，并根据您的情况进行了调整

// Get the container element
var btnContainer = document.getElementById("myDiv");

// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}

然后只设置.active类的样式：

.active {
    background-color: blue;
}

全页，其中描述了代码：

 <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
    .active {
        background-color: blue;
    }
</style>
<body>
    <div class="row container-fluid mainTabCon" id="myDiv" style="width: 100%" style="">
        <ul class="nav nav-pills" style="margin: 0 auto; ">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
            </li>
        </ul>
    </div>

    <script>
    // Get the container element
    var btnContainer = document.getElementById("myDiv");

    // Get all buttons with class="btn" inside the container
    var lis = btnContainer.getElementsByClassName("nav-link");

    // Loop through the buttons and add the active class to the current/clicked button
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function() {
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
        });
    }
</script>
</body>
</html>

与其他用户讨论后，您是指Bootstrap的js库吗？如果不是，请将其添加到正文的末尾，并忽略上面的代码以查看其是否有效。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

单击CSS中的导航按钮时更改背景图像

1 个答案: