javascript - Bootstrap4 JQuery 响应选项卡工作不正确，提供了片段
问题描述
所以我插入了一个片段来显示问题。在我的实际代码中，我使用 jinga forloop 来创建卡片。
每张卡片都有响应标签。
但是，当您单击卡 2 的标签查看卡 2 的数据时，它会在第一张卡的标签中显示第一张卡的数据。
但是，卡 2 的姓名和年龄等数据正确显示，因为没有选项卡单击以显示该数据。
基本上每张卡片的标签都应该显示那张卡片的数据。
当我href="#profile"在nav-link课堂id="profile"上制作并且两张卡片不同时，这个问题就解决了。
例如href="#profile"和id="profile"对于卡 1 和
href="#Profile"对于卡id="Profile"2。
但是，因为我正在运行一个 for 循环来实例化卡片，所以我不能这样做。
谁能帮我？
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
html,
body {
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
color: white;
font-family: 'Poppins', sans-serif;
}
main {
min-height: calc(100vh - 200px);
}
p {
font-family: 'Source Sans Pro';
}
h3 {
font-family: 'Poppins', sans-serif;
color: black;
}
.card h1,
h2,
h3,
h4,
h5,
p {
font-family: 'Poppins', sans-serif;
color: white;
}
.card {
background: linear-gradient(to bottom, orange, red);
width: 18rem;
}
.card a {
color: white;
}<head>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-lg-12">
<div class="padding-success">
<div class="row mt-5 justify-content-center">
<!-- Card Navbar -->
<div class="card card-custom mx-2 mb-3">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#profile" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bio" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#company" data-toggle="tab">Company</a>
</li>
</ul>
</div>
<!-- Card Navbar content -->
<div class="card-body tab-content">
<!-- Home tab -->
<div class="tab-pane active" id="profile">
<div class="card-body padding-success">
<h3 class="marker">Jane Jones</h3>
<h3 class="marker">43</h3>
</div>
</div>
<!-- about tab -->
<div class="tab-pane" id="bio">
<div class="padding-all">
<p class="card-text">Jane Jones: Hi there</p>
</div>
</div>
<!-- videos tab -->
<div class="tab-pane" id="company">
<div class="padding-all">
<p class="card-text">Jane Jones: my dog</p>
</div>
</div>
<!-- end of navbar tabs -->
</div>
</div>
<!-- Card Navbar 2 -->
<div class="card card-custom mx-2 mb-3">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#profile" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bio" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#company" data-toggle="tab">Company</a>
</li>
</ul>
</div>
<!-- Card Navbar content -->
<div class="card-body tab-content">
<!-- Home tab -->
<div class="tab-pane active" id="profile">
<div class="card-body padding-success">
<h3 class="marker">Bob Jones</h3>
<h3 class="marker">43</h3>
</div>
</div>
<!-- about tab -->
<div class="tab-pane" id="bio">
<div class="padding-all">
<p class="card-text">Bob Jones card: Hi</p>
</div>
</div>
<!-- videos tab -->
<div class="tab-pane" id="company">
<div class="padding-all">
<p class="card-text">Bob Jones card: cheese</p>
</div>
</div>
<!-- end of navbar tabs -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap min.CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Bootstrap 4 min.js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Bootstrap 4 min.js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>解决方案
您在两个元素中使用相同的 id，这是一个非常糟糕的主意......每个元素的 id 应该是唯一的
由于您正在运行循环，我可以建议改用数据属性
对于每个循环，您可以为您的元素 ( data-profile=1) 分配一个自定义属性，对于 herf，您可以使用href= "[data-profile='1']"然后相应地增加数字
见片段代码：
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
html,
body {
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
color: white;
font-family: 'Poppins', sans-serif;
}
main {
min-height: calc(100vh - 200px);
}
p {
font-family: 'Source Sans Pro';
}
h3 {
font-family: 'Poppins', sans-serif;
color: black;
}
.card h1,
h2,
h3,
h4,
h5,
p {
font-family: 'Poppins', sans-serif;
color: white;
}
.card {
background: linear-gradient(to bottom, orange, red);
width: 18rem;
}
.card a {
color: white;
}<head>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-lg-12">
<div class="padding-success">
<div class="row mt-5 justify-content-center">
<!-- Card Navbar -->
<div class="card card-custom mx-2 mb-3">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="[data-profile='1']" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[data-bio='1']" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[data-company='1']" data-toggle="tab">Company</a>
</li>
</ul>
</div>
<!-- Card Navbar content -->
<div class="card-body tab-content">
<!-- Home tab -->
<div class="tab-pane active" data-profile='1'>
<div class="card-body padding-success">
<h3 class="marker">Jane Jones</h3>
<h3 class="marker">43</h3>
</div>
</div>
<!-- about tab -->
<div class="tab-pane" data-bio='1'>
<div class="padding-all">
<p class="card-text">Jane Jones: Hi there</p>
</div>
</div>
<!-- videos tab -->
<div class="tab-pane" data-company='1'>
<div class="padding-all">
<p class="card-text">Jane Jones: my dog</p>
</div>
</div>
<!-- end of navbar tabs -->
</div>
</div>
<!-- Card Navbar 2 -->
<div class="card card-custom mx-2 mb-3">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="[data-profile='2']" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[data-bio='2']" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[data-company='2']" data-toggle="tab">Company</a>
</li>
</ul>
</div>
<!-- Card Navbar content -->
<div class="card-body tab-content">
<!-- Home tab -->
<div class="tab-pane active" data-profile='2'>
<div class="card-body padding-success">
<h3 class="marker">Bob Jones</h3>
<h3 class="marker">43</h3>
</div>
</div>
<!-- about tab -->
<div class="tab-pane" data-bio='2'>
<div class="padding-all">
<p class="card-text">Bob Jones card: Hi</p>
</div>
</div>
<!-- videos tab -->
<div class="tab-pane"data-company='2'>
<div class="padding-all">
<p class="card-text">Bob Jones card: cheese</p>
</div>
</div>
<!-- end of navbar tabs -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap min.CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Bootstrap 4 min.js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Bootstrap 4 min.js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>推荐阅读
- performance - 通过自定义单元格和异步数据加载提高 v-data-table 的性能
- javascript - 仅当存储在服务器上的文件发生更改时，如何更新我的 html？
- regex - 如何使用 Excel 公式来验证自定义的电子邮件地址？
- regex - 可以使用 Angular 8 在 ngx-translate i18n json 文件中使用正则表达式吗？
- python-3.x - 如何在一行上打印多行
- c# - 将 JSON 转换为涉及大量嵌套 JSON 对象的 C#
- python - Python：更新类函数内嵌套字典的值
- string - 如何在 Clojure 中替换字符串中的特定字符？
- google-cloud-platform - 云功能无法移动存档桶中的文件
- javascript - Javascript：函数返回 0 而不是出现奇数次的数字