Блог

Главная - Вопросы по программированию - таблетки bootstrap 4 не деактивируются после нажатия один раз

таблетки bootstrap 4 не деактивируются после нажатия один раз

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я пытаюсь создать вертикально выровненные загрузочные таблетки с пользовательским стилем для своего веб-сайта.

Но в любом случае, когда таблетки однажды активируются (при нажатии на них), они не деактивируются при следующем нажатии на другую вкладку, в результате я не могу правильно изменить свою вкладку.

А таблетки с 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

Ответ №1:

Проблема в основном заключается в том, что вы пытаетесь использовать pill элементы, которые не являются a тегами.

Как вы можете видеть в Bootstrap javascript-behavior , все примеры задаются с pill a помощью тега on .

Кроме того, в 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>

Комментарии:

1. хорошо, это означает, что мне нужно изменить всю структуру, большое спасибо за то, что выяснили проблему.