1 回答
TA贡献1863条经验 获得超2个赞
这是因为使用了类和 href,例如试试这个:
$(document).on('click','.navigation a', function (e) {
e.preventDefault();
$(this).tab('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-columns">
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
</li>
<li class="nav-item">
<a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Item name</h4>
<div class="tab-content mt-3">
<div class="tab-pane active info" role="tabpanel">
<img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
<div class="text-center">
<a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
<a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
</div>
</div>
<div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
<h6 class="card-subtitle mb-2">Ingredient list</h6>
<ul id=ingredientList>
<li>Ingredient</li>
<li>Ingredient</li>
<li>Ingredient</li>
<li>Ingredient</li>
</ul>
</div>
<div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
<h6 class="card-subtitle mb-2">Nutrition information</h6>
<ul id=nutritionInfo>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" href=".info2" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href=".ingredients2" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
</li>
<li class="nav-item">
<a class="nav-link" href=".nutrition2" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Item name</h4>
<div class="tab-content mt-3">
<div class="tab-pane active info2" role="tabpanel">
<img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
<div class="text-center">
<a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
<a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
</div>
</div>
<div class="tab-pane ingredients2" role="tabpanel" aria-labelledby="ingredients-tab">
<h6 class="card-subtitle mb-2">Ingredient list</h6>
<ul id=ingredientList>
<li>Ingredient</li>
<li>Ingredient</li>
<li>Ingredient</li>
<li>Ingredient</li>
</ul>
</div>
<div class="tab-pane nutrition2" role="tabpanel" aria-labelledby="nutrition-tab">
<h6 class="card-subtitle mb-2">Nutrition information</h6>
<ul id=nutritionInfo>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" href=".info3" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href=".ingredients3" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
</li>
<li class="nav-item">
<a class="nav-link" href=".nutrition3" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Item name</h4>
<div class="tab-content mt-3">
<div class="tab-pane active info3" role="tabpanel">
<img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
<div class="text-center">
<a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
<a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
</div>
</div>
<div class="tab-pane ingredients3" role="tabpanel" aria-labelledby="ingredients-tab">
<h6 class="card-subtitle mb-2">Ingredient list</h6>
<ul id=ingredientList>
<li>Ingredient</li>
<li>Ingredient</li>
<li>Ingredient</li>
<li>Ingredient</li>
</ul>
</div>
<div class="tab-pane nutrition3" role="tabpanel" aria-labelledby="nutrition-tab">
<h6 class="card-subtitle mb-2">Nutrition information</h6>
<ul id=nutritionInfo>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
<li>Nutrition item</li>
</ul>
</div>
</div>
</div>
</div>
</div>
添加回答
举报