Why is Tab not working in bootstrap 5?

V

Vadim Ochinsky2021-10-28 11:22:37

Bootstrap

Vadim Ochinsky, 2021-10-28 11:22:37

There is a site on bootstrap, I uploaded it as a template on WP.
I connected the styles, but the information in the tabs is not displayed, except for the first
one, here is the code, for a better understanding of the problem.
I'm trying to implement the following: there is an index.php file In it, I opened a document <?php get_template_part( 'kazpost/kazpostCity'); ?> kazpostCity - in this document, the tab itself (code below)
kazpostCity.php contains a simple script (I tested it on the local, it worked), but it does not want to on the site. Help me understand why the other tabs do not work. Where did I make a mistake, please tell me ...
Here is the index.php file

<!DOCTYPE html>
<html lang="en">
<?php get_header(); ?>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Заголовок</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700&display=swap" />
    <!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
    <!-- Custom styles -->
    <link rel="stylesheet" href="css/style.css" />
  <!-- Development version -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
  <script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/tippy-bundle.umd.js"></script>
  <script>
     tippy('[data-tippy-content]');
    </script>	
  </head>
  <body>
      <!--Main Navigation-->
  <header>
        <?php get_template_part( 'head'); ?>
    </header>
    <body>
  <div class="container-fluid text-center">
</br><h1 class="mb-3 margin h1">тут заголовок</h1>
<p class="mb-3 text-muted">тут описание</p>
<hr class="my-4" />
<h3 class="mb-3 h3"> второй заголовок</h3>
<p class=""> описание2
</p>
</div>
 <!--Main layout-->
    <div class="container">
          <section>
            <?php get_template_part( 'kazpost/kazpostCity'); ?>
          </section>
          <!--Section: Content-->
        </div>
        <!--Grid column-->
<body>
<footer>
<?php get_footer(); ?>
  </footer>

Here is the kazpostCity.php file

<!DOCTYPE html>
<?php get_header(); ?>
<!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
    <!-- Custom styles -->
    <link rel="stylesheet" href="css/style.css" />
<!--script type="text/javascript">
    function showTab(tabNumber) {
      var tabIDs = ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6", "tab7", "tab8", "tab9", "tab10", "tab11", "tab12", "tab13", "tab14", "tab15", "tab16", "tab17", "tab18", "tab19", "tab20", "tab21", "tab22", "tab23", "tab24", "tab25", "tab26", "tab27", "tab28", "tab29", "tab30", "tab31", "tab32", "tab33", "tab34", "tab35", "tab36", "tab37"];
      var tabButtonIDs = ["tabButton1", "tabButton2", "tabButton3", "tabButton4", "tabButton5", "tabButton6", "tabButton7", "tabButton8", "tabButton9", "tabButton10", "tabButton11", "tabButton12", "tabButton13", "tabButton14", "tabButton15", "tabButton16", "tabButton17", "tabButton18", "tabButton19", "tabButton20", "tabButton21", "tabButton22", "tabButton23", "tabButton24", "tabButton25", "tabButton26", "tabButton27", "tabButton28", "tabButton29", "tabButton30", "tabButton31", "tabButton32", "tabButton33", "tabButton34", "tabButton35", "tabButton36", "tabButton37"];
      for (var i = 0; i < tabIDs.length; i++) {
        document.getElementById(tabIDs[i]).style.display = (tabNumber == i ? 'block' : 'none');
        document.getElementById(tabButtonIDs[i]).className = (tabNumber == i ? "active" : "");
      }
    }
</script-->
<div class="container-fluid id=tabContainer">
  <ul class="nav nav-pills nav-tabs mb-3 justify-content-center">
        <li><a class="active" id="tabButton1" onclick="showTab(0)" href="javascript:void(0);">Алматы</a></li>
        <li><a id="tabButton2" onclick="showTab(1)" href="javascript:void(0);">Астана</a></li>	
        <li><a id="tabButton3" onclick="showTab(2)" href="javascript:void(0);">Актобе</a></li>	
    <li><a id="tabButton4" onclick="showTab(3)" href="javascript:void(0);">Шымкент</a></li>
    <li><a id="tabButton5" onclick="showTab(4)" href="javascript:void(0);">Атырау</a></li>
    <li><a id="tabButton6" onclick="showTab(5)" href="javascript:void(0);">Актау</a></li>
    <li><a id="tabButton7" onclick="showTab(6)" href="javascript:void(0);">Уральск</a></li>
    <li><a id="tabButton8" onclick="showTab(7)" href="javascript:void(0);">Костанай</a></li>
    <li><a id="tabButton9" onclick="showTab(8)" href="javascript:void(0);">Семей</a></li>
    <li><a id="tabButton10" onclick="showTab(9)" href="javascript:void(0);">Караганда</a></li>
    <li><a id="tabButton11" onclick="showTab(10)" href="javascript:void(0);">Кызылорда</a></li>
    <li><a id="tabButton12" onclick="showTab(11)" href="javascript:void(0);">Талдыкорган</a></li>
    <li><a id="tabButton13" onclick="showTab(12)" href="javascript:void(0);">Павлодар</a></li>
    <li><a id="tabButton14" onclick="showTab(13)" href="javascript:void(0);">Петропавловск</a></li>
    <li><a id="tabButton15" onclick="showTab(14)" href="javascript:void(0);">Кокшетау</a></li>
    <li><a id="tabButton16" onclick="showTab(15)" href="javascript:void(0);">Нур-Султан</a></li>
    <li><a id="tabButton17" onclick="showTab(16)" href="javascript:void(0);">Экибастуз</a></li>
    </ul>
  <div class="tab-content text-center" id="pills-tabContent">
<div class="container-fluid justify-content-center badge bg-light text-black">
<div id="tab1"><?php get_template_part( 'kazpost/almaty'); ?> Алматы</div>
<div id="tab2" style="display:none;"><?php get_template_part( 'kazpost/astana'); ?> Астана</div>
<div id="tab3" style="display:none;"><?php get_template_part( 'kazpost/aktobe'); ?> Актобе</div>
<div id="tab4" style="display:none;"><?php get_template_part( 'kazpost/shymkent'); ?> Шымкент</div>
<div id="tab5" style="display:none;"><?php get_template_part( 'kazpost/atyrau'); ?> Атырау</div>
<div id="tab6" style="display:none;"><?php get_template_part( 'kazpost/aktau'); ?>Актау</div>
<div id="tab7" style="display:none;"><?php get_template_part( 'kazpost/uralsk'); ?> Уральск</div>
<div id="tab8" style="display:none;"><?php get_template_part( 'kazpost/kostanaj'); ?> Костанай</div>
<div id="tab9" style="display:none;"><?php get_template_part( 'kazpost/semej'); ?> Семей</div>
<div id="tab10" style="display:none;"><?php get_template_part( 'kazpost/кaraganda'); ?> Караганда</div>
<div id="tab11" style="display:none;"><?php get_template_part( 'kazpost/kyzylorda'); ?> Кызылорда</div>
<div id="tab12" style="display:none;"><?php get_template_part( 'kazpost/taldykorgan'); ?> Талдыкорган</div>
<div id="tab13" style="display:none;"><?php get_template_part( 'kazpost/pavlodar'); ?> Павлодар</div>
<div id="tab14" style="display:none;"><?php get_template_part( 'kazpost/petropavlovsk'); ?> Петропавловск</div>
<div id="tab15" style="display:none;"><?php get_template_part( 'kazpost/kokshetau'); ?> Кокшетау</div>
<div id="tab16" style="display:none;"><?php get_template_part( 'kazpost/nur-sultan'); ?> Нур-Султан</div>
<div id="tab17" style="display:none;"><?php get_template_part( 'kazpost/jekibastuz'); ?> Экибастуз</div>

But for example, separate 2 files, which I display at the bottom of the main page as a tab tab when clicking on the buttons , the
almaty.php file

<!DOCTYPE html>
<?php get_header(); ?>
    <div id="almaty">
      <div
      data-toggle="pill"
      data-mdb-target="#pills-almaty"
      class="tab-pane in active"
      id="tab1"
      role="tabpanel"
      aria-labelled="tab1"
      aria-selected="false"
      >
  <div class="container-fluid "> <span>тут какая информация</span>
  </div>
  </div>

(the second tab tab from the first tab is not in active) I also tried to show active -indicate in the first tab, but the first tab is shown, but the rest are not.
astana.php file

<!DOCTYPE html>
<?php get_header(); ?>
<div id="аstana">
      <div
      data-toggle="pill"
      class="tab-pane fade"
      id="tab2"
      role="tabpanel"
      aria-labelled="tab2"
      aria-selected="false"
      >
      <div class="container-fluid ">
   <div class="container-fluid "> <span>тут какая информация</span>
  </div>
  </div>