Изменить цвет вкладки при нажатии

Question

У меня проблема с двумя вкладками в bootstrap. То, что я хочу, это когда я нажимаю на вкладке, цвет go до желтого, от черного.

У вас 2 скриншота с кодом и дизайном.

Спасибо.

Второй

Answer 1

Вы можете установить цвета в вашем файле css следующим образом:

.active {
 color: green;
}

, а затем добавить класс к элементу html с помощью javascript при нажатии на текст:

function pillsGreen() {
 var element = document.getElementById("pills-profile");
 element.classList.add("active");
}

в вашем html вы можете затем этот код для вашего div:

<div onclick="pillsGreen()" ...>

Answer 2

Этот код начинается с «Clienti» на желтом, и когда вы нажимаете «Profile», клиенты будут черными, а «Profile» желтым, а если вы снова нажмете «Clienty», он удалит желтый из «Profile» и получит это обратно в "Клиенти".

function changeColor1(){ document.getElementById('profile').classList.remove("yellowColor"); document.getElementById('clienti').classList.add("yellowColor");
};
function changeColor2(){ document.getElementById('clienti').classList.remove("yellowColor"); document.getElementById('profile').classList.add("yellowColor");
};

.yellowColor{
    color:yellow;
}

<h1 onclick="changeColor1()" id="clienti" class="yellowColor">Clienti</h1>
<h1 onclick="changeColor2()" id="profile">Profile</h1>

Answer 3

Когда вы нажимаете на вкладку, она получает класс active ... и именно здесь вы можете оформить ее так, как вам нравится; Поскольку bootstrap загружается сверху, мы должны убедиться, что классы, которые перезаписывают класс по умолчанию bootstrap, установлены после его загрузки ... ниже должен работать фрагмент:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

<style>
  .nav-pills .nav-link {
    color: #000;
    background: #fff;
    text-decoration: underline;
    text-decoration-color: orange;
  }
  
  .nav-pills .nav-link.active {
    color: orange;
    background: #fff;
    text-decoration: underline;
    text-decoration-color: orange;
  }
</style>