изменение фонового изображения при нажатии кнопки навигации в css - PullRequest
0 голосов
/ 12 апреля 2019

Я хочу изменить цвет фона этого 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>

помощь приветствуется

1 Ответ

1 голос
/ 12 апреля 2019

Добавьте этот скрипт в конец тела или вашего файла скрипта: (взято из школы 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>

После некоторого обсуждения с другими пользователями вы обращаетесь к js-библиотекам Bootstrap? Если нет, добавьте их в конец тела и проигнорируйте приведенный выше код, чтобы увидеть, работает ли он.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...