如何使用 javascript/jquery 创建以下选项卡？
我曾尝试使用 slick.js 进行此操作，但每次我滑动选项卡时，slick 都会将其注册为点击并加载我刚刚触摸的选项卡的内容。我怎样才能消除它？
$(function() {
'use strict';
$('.pageFoot').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.pageContent',
arrows: false,
infinite: false,
focusOnSelect: true,
centerMode: true,
swipeToSlide: true,
touchThreshold: 10,
});
$('.pageContent').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.pageFoot',
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
});body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 10vh 90vh;
}
.pageFoot {
height: 10vh;
width: 100vw;
}
.pageFootItem {
height: 10vh!important;
}
.pageContent,
.pageContentItem {
height: 90vh!important;
width: 100vw;
}
.pageFootItem.slick-current {
box-shadow: inset 0 -5px aqua;
color: aqua;
}<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div class="pageFoot">
<div class='pageFootItem'>Intro</div>
<div class='pageFootItem'>T01</div>
<div class='pageFootItem'>T02</div>
<div class='pageFootItem'>T03</div>
<div class='pageFootItem'>T04</div>
<div class='pageFootItem'>T05</div>
<div class='pageFootItem'>T06</div>
<div class='pageFootItem'>T07</div>
<div class='pageFootItem'>T08</div>
<div class='pageFootItem'>T09</div>
<div class='pageFootItem'>T10</div>
<div class='pageFootItem'>T11</div>
<div class='pageFootItem'>T12</div>
<div class='pageFootItem'>T13</div>
<div class='pageFootItem'>T14</div>
<div class='pageFootItem'>T15</div>
<div class='pageFootItem'>T16</div>
<div class='pageFootItem'>T17</div>
<div class='pageFootItem'>T18</div>
<div class='pageFootItem'>T19</div>
<div class='pageFootItem'>T20</div>
</div>
<div class="pageContent">
<div class="pageContentItem">Content1</div>
<div class="pageContentItem">Content2</div>
<div class="pageContentItem">Content3</div>
<div class="pageContentItem">Content4</div>
<div class="pageContentItem">Content5</div>
<div class="pageContentItem">Content6</div>
<div class="pageContentItem">Content7</div>
<div class="pageContentItem">Content8</div>
<div class="pageContentItem">Content9</div>
<div class="pageContentItem">Content10</div>
<div class="pageContentItem">Content11</div>
<div class="pageContentItem">Content12</div>
<div class="pageContentItem">Content13</div>
<div class="pageContentItem">Content14</div>
<div class="pageContentItem">Content15</div>
<div class="pageContentItem">Content16</div>
<div class="pageContentItem">Content17</div>
<div class="pageContentItem">Content18</div>
<div class="pageContentItem">Content19</div>
<div class="pageContentItem">Content20</div>
</div>
</body>由于 slick.js 库不能免费用于商业用途，是否还有其他方法可以实现这一目标？
最佳答案
您可以使用带有 overflowX: scroll 的 css 来实现这一点。
关于javascript - 如何在 html 中创建类似 android 的滑动标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55499615/