Bootstrap 4 圆形标签导航答案

【问题标题】：Bootstrap 4 circular tabs navigationBootstrap 4 圆形标签导航
【发布时间】：2020-06-26 15:45:05
【问题描述】：

我正在尝试使用 bootstrap 4 制作圆形选项卡菜单。我尝试使用以下代码使用按钮并内联显示。

我在下面附上了预期的输出图像。所以默认情况下第一个按钮将处于活动状态。只有活动按钮背景应该有颜色。其余的都应该是灰色的。谁能让我知道如何实现这一目标

这里是代码

h1 {
  color: green;
}

.xyz {
  background-size: auto;
  text-align: center;
  padding-top: 100px;
}

.btn-circle.btn-sm {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  font-size: 8px;
  text-align: center;
}

.btn-circle.btn-md {
  width: 50px;
  height: 50px;
  padding: 7px 10px;
  border-radius: 25px;
  font-size: 10px;
  text-align: center;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 12px;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>



<body class="xyz">
  <button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
  <button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
  <button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
  <button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
  <button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
  <button type="button" class="btn btn-light btn-circle btn-sm">White</button>
  <button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>

</body>

</html>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

为此你需要一些 Javascript：

在第一次点击时将所有按钮变为灰色，即添加“空白”类
将被点击的按钮变为蓝色，即添加“活动”类
你有所有类型的类开始，这就是为什么需要 !important 来强制我们的颜色通过......但根据你的要求，你不需要所有这些彩色类

$(document).ready(function() {

  $(".btn").click(function() {

    $(".btn").each(function() {
      ($(this).hasClass('blank')) ? null: $(this).addClass('blank');
      ($(this).hasClass('active')) ? $(this).removeClass('active'): null;
    });

    $(this).addClass('active');
  });

});

h1 {
  color: green;
}

.xyz {
  background-size: auto;
  text-align: center;
  padding-top: 100px;
}

.btn-circle.btn-sm {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  font-size: 8px;
  text-align: center;
}

.btn-circle.btn-md {
  width: 50px;
  height: 50px;
  padding: 7px 10px;
  border-radius: 25px;
  font-size: 10px;
  text-align: center;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 12px;
  text-align: center;
}

.btn.btn-sm.btn-circle.blank {
  background: lightgray;
  border-color: lightgray;
}

.btn.btn-sm.btn-circle.active {
  background-color: blue !important;
  border-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script>


<div class="xyz">
  <button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
  <button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
  <button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
  <button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
  <button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
  <button type="button" class="btn btn-light btn-circle btn-sm">White</button>
  <button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</div>

【讨论】：