html - 单击一次后，引导 4 药丸不会停用

Question

我正在尝试为我的网站制作具有自定义样式的垂直对齐引导药丸。

但是无论如何，当药丸一旦激活（通过单击它）它不会通过单击下一个选项卡来停用，因此，我无法正确更改我的选项卡。

并且第 3 到第 6 粒药没有任何作用。

演示

.h-bstfecture-ul{
  list-style: none;
}

.h-bstfecture-ul li{
  padding-top: 30px;
  padding-bottom: 30PX;
  padding-right: 45PX;
  padding-left: 20PX;
  border-top: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}

.h-bstfecture-ul li a{
  text-decoration: none;
  color: #222222;
  font-size: 12px;
  margin-top: 4px;
}


.h-bstfecture-ul li img{
  max-height: 26px;
  max-width: 26px;
  /*fill: #222222;
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);*/
}

.h-bstfecture-ul li:hover a{
  color: #FFC000;
}

.bestservice-pillstitle{
  color: #222222;
  font-size: 28px;
  font-weight: 600;
}

.bestservice-pills-paragraph{
  color: #777777;
  font-size: 14px;
}

.bestservice-pillscontent ul{
  list-style: none;
}

.bestservice-pillscontent ul li{
  border: 1px solid #E5E5E5;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #777777;
  font-size: 14px;
}

.ylw-tik{
  width: 12px;
}

.our-service-title{
  color: #222222;
  font-size: 24px;
  font-weight: 600;

}

.our-service-title:before, .our-service-title:after{
  content:" ";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
  width: 30px;
  height: 4px;
  background-color: #FFC000;
}


.our-service-subtitle{
  color: #777777;
  font-size: 14px;
  max-width: 650px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="content-fluid">
  <div class="row d-flex justify-content-center m-0 mb-5">
    <div class="our-service-head">
      <p class="our-service-title text-center">Our Best Features</p>
      <p class="our-service-subtitle text-center px-3">
        Nulla ullamcorper bibendum orci, ac tempor nisl lacinia quis. 
      </p>
    </div>
  </div>
  <div class="row m-0 d-flex justify-content-center">
    <div class="bestservice-pills col-xl-2 mx-3 p-0">
      <ul class="h-bstfecture-ul m-0 p-0 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <li class="row m-0 nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
          <div style="width: 35px;"><img src="icons/our-best-feacture-1.svg"></div>
          <a href="#" class="ml-2">Efficient Inspection</a>
        </li>

        <li class="row m-0 nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-2.svg"></div>
          <a href="#" class="ml-2">Employee Safety</a>
        </li>

        <li class="row m-0 nav-link" id="3rd-tab" data-toggle="pill" href="#3rd" role="tab" aria-controls="3rd" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-3.svg"></div>
          <a href="#" class="ml-2">Industrial Automation</a>
        </li>

        <li class="row m-0 nav-link" id="4th-tab" data-toggle="pill" href="#4th" role="tab" aria-controls="4th" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-4.svg"></div>
          <a href="#" class="ml-2">Employee Feedback</a>
        </li>

        <li class="row m-0 nav-link" id="5th-tab" data-toggle="pill" href="#5th" role="tab" aria-controls="5th" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-5.svg"></div>
          <a href="#" class="ml-2">Live Data Monitoring</a>
        </li>

        <li class="row m-0 nav-link" id="6th-tab" data-toggle="pill" href="#6th" role="tab" aria-controls="6th" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-6.svg"></div>
          <a href="#" class="ml-2">Technological Support</a>
        </li>
      </ul>
    </div>

    <div class="col-xl-5 border border-primary mx-1 p-0 tab-content" id="v-pills-tabContent">


      <!-- 1st pill -->             
      <div class="bestservice-pillscontent tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>1st</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>2nd</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="3rd" role="tabpanel" aria-labelledby="3rd-tab">
        <p>3rd</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="4th" role="tabpanel" aria-labelledby="4th-tab">
        <p>4th</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="5th" role="tabpanel" aria-labelledby="5th-tab">
        <p>5th</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="6th" role="tabpanel" aria-labelledby="6th-tab">
        <p>6th</p>
      </div>


    </div>

    <div class="col-xl-3 border border-primary mx-1 p-0">
      <div class="m-0">
        <img src="images/best fecture-1.png">
      </div>
    </div>
  </div>
</div>

我怎么解决这个问题？

问题的文件链接 - https://github.com/Kanchon-Gharami/problems-share-in-git.git

标签： htmlcssbootstrap-4

Answer 1

问题基本上是您试图pill在不是a标签的元素上使用。

正如您在 Bootstrap javascript-behavior中看到的那样，所有示例都使用pillona标签设置。

另外，在Via JavaScript中，有以下代码：

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

这大概是用于管理的类似代码pill。所以基本上它是基于a标签的。

a下面，您从您的代码中找到了一个轻量级演示，该演示适用于tag + href 指向右侧的药丸id（我让您将蓝色背景优化为正确的方式）：

.h-bstfecture-ul{
  list-style: none;
}

.h-bstfecture-ul li{
  padding-top: 30px;
  padding-bottom: 30PX;
  padding-right: 45PX;
  padding-left: 20PX;
  border-top: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}

.h-bstfecture-ul li a{
  text-decoration: none;
  color: #222222;
  font-size: 12px;
  margin-top: 4px;
}


.h-bstfecture-ul li img{
  max-height: 26px;
  max-width: 26px;
  /*fill: #222222;
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);*/
}

.h-bstfecture-ul li:hover a{
  color: #FFC000;
}

.bestservice-pillstitle{
  color: #222222;
  font-size: 28px;
  font-weight: 600;
}

.bestservice-pills-paragraph{
  color: #777777;
  font-size: 14px;
}

.bestservice-pillscontent ul{
  list-style: none;
}

.bestservice-pillscontent ul li{
  border: 1px solid #E5E5E5;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #777777;
  font-size: 14px;
}

.ylw-tik{
  width: 12px;
}

.our-service-title{
  color: #222222;
  font-size: 24px;
  font-weight: 600;

}

.our-service-title:before, .our-service-title:after{
  content:" ";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
  width: 30px;
  height: 4px;
  background-color: #FFC000;
}


.our-service-subtitle{
  color: #777777;
  font-size: 14px;
  max-width: 650px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="content-fluid">
  <div class="row d-flex justify-content-center m-0 mb-5">
    <div class="our-service-head">
      <p class="our-service-title text-center">Our Best Features</p>
      <p class="our-service-subtitle text-center px-3">
        Nulla ullamcorper bibendum orci, ac tempor nisl lacinia quis. 
      </p>
    </div>
  </div>
  <div class="row m-0 d-flex justify-content-center">
    <div class="bestservice-pills col-xl-2 mx-3 p-0">
      <ul class="h-bstfecture-ul m-0 p-0 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <li class="row m-0 nav-item">
          <a href="#v-pills-home" class="ml-2 nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <div style="width: 35px;"><img src="icons/our-best-feacture-1.svg"></div>
            Efficient Inspection
          </a>
        </li>

        <li class="row m-0 nav-item">
          <a href="#v-pills-profile" class="ml-2 nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <div style="width: 35px;"><img src="icons/our-best-feacture-2.svg"></div>
            Employee Safety
          </a>
        </li>
      </ul>
    </div>

    <div class="col-xl-5 border border-primary mx-1 p-0 tab-content" id="v-pills-tabContent">


      <!-- 1st pill -->             
      <div class="bestservice-pillscontent tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>1st</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>2nd</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="3rd" role="tabpanel" aria-labelledby="3rd-tab">
        <p>3rd</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="4th" role="tabpanel" aria-labelledby="4th-tab">
        <p>4th</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="5th" role="tabpanel" aria-labelledby="5th-tab">
        <p>5th</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="6th" role="tabpanel" aria-labelledby="6th-tab">
        <p>6th</p>
      </div>


    </div>

    <div class="col-xl-3 border border-primary mx-1 p-0">
      <div class="m-0">
        <img src="images/best fecture-1.png">
      </div>
    </div>
  </div>
</div>