So I've inserted a snippet to show the problem. In my actual code I am using a jinga forloop to create the cards.
Each card has responsive tabs.
However when you click on card 2's tabs to see card 2's data, it displays the 1st card's data in the tabs of the 1st card.
However, the data such as name and age is shown correctly for card 2 as there is no tab clicking to display that.
Essentially each card's tabs should show THAT card's data.
This problem is solved when I make the href="#profile" in the nav-link class and id="profile" different for the two cards.
Such as href="#profile" and id="profile" for card 1 and
href="#Profile" and id="Profile" for card 2.
However because I'm running a for loop to instantiate the cards, I can't do this.
Can anyone help me?
@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>答案 0 :(得分：1)
You are using the same id in two elements which a really bad idea...the id should be unique for each element
Since you are running a loop i can suggest using data attributes instead
For each loop you can assign a custom attribute to your element (data-profile=1) and for herf you can use href= "[data-profile='1']" and then increment the number accordingly
see snippet code:
@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>答案 1 :(得分：0)
Add a new Id to each of the instances.
#bio
and
#bio2
@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="#profile2" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bio2" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#company2" 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="profile2">
<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="bio2">
<div class="padding-all">
<p class="card-text">Bob Jones card: Hi</p>
</div>
</div>
<!-- videos tab -->
<div class="tab-pane" id="company2">
<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>