单击更改颜色选项卡

Question

引导程序中的两个选项卡存在一些问题。我想要的是当我按选项卡时，颜色从黑色变为黄色。

您有2个包含代码和设计的屏幕截图。

谢谢。

第二

Answer 1

当您按下选项卡时，它会得到一个active类...在这里，您可以按照自己喜欢的方式对其进行样式设置；由于引导程序是在顶部加载的，因此我们必须确保在覆盖默认引导程序类之后，设置了覆盖默认引导程序类的类...片段下方应能正常工作：

<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>

Answer 2

您可以这样在css文件中设置颜色：

.active {
 color: green;
}

，然后在单击文本时使用javascript将类添加到您的html元素中：

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

然后在您的html中将此代码添加到div：

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

Answer 3

此代码以黄色的“ Clienti”开头，当您单击“配置文件”时，clienti将为黑色，“配置文件”为黄色，如果再次单击“ Clienty”，它将从“配置文件”中删除黄色并具有放回“ Clienti”中。

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>