Проблема для отображения меню вкладок

ProgramBox

Проблема для отображения меню вкладок

Post author:admin
Запись опубликована:21 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #css #html5-canvas

#javascript #HTML #css #html5-холст

Вопрос:

Я не могу правильно отобразить меню вкладок и не нахожу решения.

Обычно .tab_container должно отображаться, и мы можем переключиться на вторую вкладку, когда мы нажимаем на нее.

Я увидел ошибку, но я нахожу, в чем проблема:

Неперехваченный «Ошибка ссылки: $ не определен»

Здесь вы можете найти мой 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>

1. Похоже, вам не хватает jQuery CDN, включите его, тогда он будет работать

2. Спасибо, это работает, но я не понимаю, что мне нужно иметь в 2. поместите мой локальный скрипт jquery в верхний и нижний колонтитулы, иначе он не работает…

3. Добавьте этот <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> CDN непосредственно перед закрытием вашей основной вкладки ( </body> ). Вы можете поместить jQuery в заголовок, это просто соглашение, чтобы сохранить jQuery (или любой JS-скрипт) внизу, чтобы был загружен весь HTML-документ, на который будет действовать jQuery, иначе что произойдет, если jQuery загрузится перед содержимым HTML и выдаст сообщение об ошибке какjQuery не сможет найти много содержимого HTML для работы.

Ответ №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>

Вопрос:

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

Ответ №1:

Вам также может понравиться

Динамический Sql с задержкой ожидания для проверки состояния

добавляйте строку таблицы после каждой пятой строки с помощью javascript / jQuery

Пользователь может получить доступ к ресурсу, даже если он не является частью «@Secured ([роль])»