Блог

Я создаю 4 панели вкладок, используя Bootstrap 4. Содержимое других вкладок должно исчезать, когда я нажимаю на них. Проблема в том, что ничего не происходит, когда я нажимаю на другие панели. Есть идеи, почему это может происходить?

  <div class="container">
            <div class="row row-content">
                <div class="col-12">
                    <h2>Corporate Leadership</h2>
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#peter"
                                role="tab" data-toggle="tab">Peter Pan, CEO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#danny"
                                role="tab" data-toggle="tab">Danny Witherspoon, CFO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#agumbe"
                                role="tab" data-toggle="tab">Agumbe, Tang, CTO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#alberto"
                                role="tab" data-toggle="tab">Alberto Sommaya, Chef</a>
                        </li>            
                    </ul>

                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade show active" id="peter">
                            <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
                            <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
                        </div>

                        <div role="tabpanel" class="tab-pane" id="danny">
                            <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
                            <p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="agumbe">
                            <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
                            <p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="alberto">
                            <h3>Alberto Somayya <small>Executive Chef</small></h3>
                            <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
                        </div>
                    </div>  
                </div>
             </div>
       </div>
 

Это ваш код, скопированный напрямую и работающий нормально. Я бы проверил, чтобы убедиться, что у вас нет дубликатов идентификаторов на вашей странице, поскольку это потенциально может привести к тому, что вы видите.

 <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.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  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="container">
  <div class="row row-content">
    <div class="col-12">
      <h2>Corporate Leadership</h2>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#danny" role="tab" data-toggle="tab">Danny Witherspoon, CFO</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe, Tang, CTO</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Sommaya, Chef</a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade show active" id="peter">
          <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
          <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the
            tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant,
            pioneering cross-cultural culinary connections.</p>
        </div>

        <div role="tabpanel" class="tab-pane fade" id="danny">
          <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
          <p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties
            of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
        </div>

        <div role="tabpanel" class="tab-pane fade" id="agumbe">
          <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
          <p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards.
            He lives by his motto, <em>You click only if you survive my lick.</em></p>
        </div>

        <div role="tabpanel" class="tab-pane fade" id="alberto">
          <h3>Alberto Somayya <small>Executive Chef</small></h3>
          <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
        </div>
      </div>
    </div>
  </div>
</div> 

Забыл добавить следующее на мою HTML-страницу:

      <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
     <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>