显示选项卡菜单的问题答案

【问题标题】：Issue for displaying tab menu显示选项卡菜单的问题
【发布时间】：2021-02-16 19:41:51
【问题描述】：

我无法正确显示标签菜单，也没有找到解决方案。

正常情况下.tab_container应该会显示出来，点击后可以切换到第二个标签。

我看到了一个错误，但我发现问题出在哪里：

未捕获的“ReferenceError: $ 未定义”

在这里你可以找到我的 Codepen：https://codepen.io/tagline2020/pen/QWExZOg

$(document).ready(function(){
    $('.tab_container:first').show();
    $('.tab_navigation li:first').addClass('active');
    $('.tab_navigation li').click(function(event){
    index = $(this).index();
    $('.tab_navigation li').removeClass('active');
    $(this).addClass('active');
    $('.tab_container').hide();
    $('.tab_container').eq(index).show();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
  <title>Document</title>
  <style>
      .container-services{
    margin-left: 8%;
    margin-right: 8%;
  }
  .tab_navigation{
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 20px;
  
  }
  .tab_navigation li{
    display: inline-block;
    padding: 5px 15px;
    background: black;
    min-width: 100px;
    text-align: center;
    color: #d4b26b;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }
  .tab_navigation li.active{
    background: black;
    animation: shake 0.82s cubic-bezier(0,.71,.86,-0.21);
  }
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  
  .tab_navigation li:hover{
    background: #d4b26b;
    color : black
    
  }
  .tab_container_area{
    
  }
  .tab_container{
    font-family: 'Roboto';
    padding: 10px;
    background:  white;
    color: #fff;
    border-radius: 0 5px 5px 5px;
    display: none;
    margin-bottom: 20px;
  }
  
  .tab_container p{
    margin-bottom: 20px;
  }
  .skills{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px #d4b26b solid;
    color : black;
  }
  .icons_services{
    max-width: 35px;
    max-height: 35px;
  }
  .service-price{
    font-weight: medium;
    color: black;
    font-size: bold;
   }

  </style>
</head>
<body>
  <div class="container-services">
    <ul class="tab_navigation">
        <li>Femme</li>
        <li>Coloration</li>
        <li>Homme</li>
        <li>Manucure</li>
    </ul>
    <div class="tab_container_area">
        <div class="tab_container">
            <p class="skills">Brushing cheveux long<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Shampoing.png" alt=""><span class="service-price">45.- CHF</span></p>
            <p class="skills">Shamp/Brushing cheveux courts<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Shampoing.png" alt=""><span class="service-price">30.- CHF</span></p>
            <p class="skills">Masque nourrissant <br>Crème intensive<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Pot-creme.png" alt=""><span class="service-price">10.- CHF</span></p>
            <p class="skills">Coupe Cheveux épais<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Ciseaux.png" alt=""><span class="service-price">75.- CHF</span></p>
            <p class="skills">Coupe<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Ciseaux.png" alt=""><span class="service-price">66.- CHF</span></p>
            <p class="skills">Coupe avant technique<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Ciseaux.png" alt=""><span class="service-price">50.- CHF</span></p>
            <p class="skills">Frange<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Ciseaux.png" alt=""><span class="service-price">15.- CHF</span></p>
            <p class="skills">Permanente<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Bling-Bling.png" alt=""><span class="service-price">de 100.- à 140.- CHF</span></p>
            <p class="skills">Lissage Brésilien<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Lisseur.png" alt=""><span class="service-price"> Prix sur place</span></p>
            <p class="skills">Défrisage<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Lisseur.png" alt=""><span class="service-price">de 135.- à 155.- CHF</span></p>
            <p class="skills">Fixatif<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Bling-Bling.png" alt=""><span class="service-price">de 5.- à 8.- CHF</span></p>
            <p class="skills">Coup de peigne<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Bling-Bling.png" alt=""><span class="service-price">de 25.- à 30.- CHF</span></p>
        </div>
        <div class="tab_container">
            <p class="skills">Teinture (avec shamppoing special Majirel)<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 100.- à 135.- CHF</span></p>
            <p class="skills">Coloration Racines/Shamp/Démélant<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 95.- à 120.- CHF</p>
            <p class="skills">Coloration Racines-Longueurs/Shamp/Soin<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 95.- à 120.- CHF</p>
            <p class="skills">Décoloration<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 80.- à 100.- CHF</p>
            <p class="skills">Balayage planchette<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 90.- à 115.- CHF</p>
            <p class="skills">Mèches au bonnet<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 90.- à 120.- CHF</p>
            <p class="skills">Mèches au papier<img class="icons_services" src="<?php bloginfo('template_url'); ?>/lib/pages-services/Couleur.png" alt=""><span class="service-price">de 140.- à 180.- CHF</p>
        </div>
        <div class="tab_container">
            <p class="skills">Coupe Homme Chx épais/Transfo<span class="service-price">55.- CHF</p>
            <p class="skills">Coupe Homme<span class="service-price">42.- CHF</p>
            <p class="skills">Barbe<span class="service-price">15.- CHF</p>
        </div>
        <div class="tab_container">
            <p class="skills">Manucure<span class="service-price">40.- CHF</p>
            <p class="skills">French Manucure<span class="service-price">45.- CHF</p>
            <p class="skills">Pédicure<span class="service-price">70.- CHF</p>
        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

您似乎缺少 jQuery CDN，包括它然后它会工作
谢谢，它正在工作，但我不明白我需要在我的页眉和页脚中放置我的本地 jquery 脚本 2 的东西，否则它不起作用......
在关闭正文标签 (</body>) 之前添加此 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> CDN。您可以将 jQuery 放在标题中，这只是将 jQuery（或任何 JS 脚本）保留在底部的约定，以便加载整个 HTML 文档，jQuery 将对其进行操作，否则 jQuery 将在之前加载会发生什么HTML 内容，并且会给出一个错误，因为 jQuery 将无法找到许多 HTML 内容来处理。

标签： javascript html css html5-canvas

【解决方案1】：

在我的例子中，我将 .js 文件放在 jQuery 脚本链接之前，将 .js 文件放在 jQuery 脚本链接之后解决了我的问题。

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

【讨论】：