Итак, я вставил фрагмент, чтобы показать проблему. В моем собственном коде я использую jinga forloop для создания карт.
Каждая карта имеет отзывчивые вкладки.
Однако, когда вы нажимаете на вкладки карты 2, чтобы увидеть данные карты 2, она отображает данные 1-й карты на вкладках 1-й карты.
Однако такие данные, как имя и возраст, отображаются правильно для карты 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>