如何解决显示标签菜单的问题
我无法正确显示选项卡菜单，也找不到解决方案。
通常应该显示.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>解决方法
就我而言，我将.js文件放在jQuery脚本链接之前， 将.js文件放在jQuery脚本链接之后解决了我的问题。
remote_file "#{sweeper_install_dir}/test.tar.gz" do
source 'http://somesite.com/test.tar.gz'
action :create
notifies :run,'execute[Untar]',:immediately
end
execute 'Untar' do
command "tar zxvf #{sweeper_install_dir}/test.tar.gz -C #{dir}"
action: nothing
end
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
