html - 无法让 bootstrap 4 选项卡与刀片一起使用
问题描述
我在这里有一个小问题，试图设计一个配置文件，但无法让 bootstrap 4 选项卡工作。这是个人资料页面代码。
@extends('layouts.core')
@section('content')
<div class="content">
<div class="row profile-content">
<div class="col-sm-3">
<h2>Profile Information</h2>
<ul class="list-group">
<li class="list-group-item">
Name : {{$post->name}}
</li>
<li class="list-group-item">
Email : {{$post->email}}
</li>
<li class="list-group-item">
Verified :
@if($post->email_verified_at)
Yes
@else
No
@endif
</li>
</ul>
</div>
<div class="col-md">
<h2>Posted Products</h2>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab"
data-toggle="pill" href="#pills-home" role="tab"
aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab"
data-toggle="pill" href="#pills-profile" role="tab"
aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab"
data-toggle="pill" href="#pills-contact" role="tab"
aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home"
role="tabpanel" aria-labelledby="pills-home-tab">
@foreach($query as $row)
<div class="product-card" role="tab">
<div class="card">
<div class="card-head">
<img class="card-img-top"
src="/storage/products/{{$row->image}}"
alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">
<a href="/product/{{$row->unique_id}}">
{{$row->name}}
</a>
</h5>
<p class="card-text">{{$row->price}}$</p>
<p class="card-text">
@if($row->stock==0)
<span style="color:red;">
Not Available
</span>
@else
Stock : {{$row->stock}}
@endif
</p>
</div>
<div class="card-body text-center">
<a href="/product/{{$row->unique_id}}"
class="btn btn-primary">
<i class="fas fa-info-circle mr-2"></i>
Details
</a>
@if(Auth::user())
@if(!$row->stock==0)
<a href="/add/{{$row->unique_id}}/1"
class="btn btn-success mr-2">
<i class="fas fa-cart-plus mr-2"></i>
Add To Cart
</a>
@endif
@endif
</div>
@if(Auth::user()->is_admin || $row->by == Auth::user()->email)
<form class='col text-center p-0'
action="{{ action('PostsController@destroy' , $row->id)}}"
onsubmit="return confirm('Are you sure you want to delete ?');" class="text-right" method="POST">
<a class="btn btn-danger w-100">
<i class="fas fa-trash-alt" style="color:white;"></i>
<input type='submit' class='none' name="_method" value="Delete">
</a>
{{ csrf_field() }}
</form>
@endif
</div>
</div>
@endforeach
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab">
AAAAAAAAAAAAAAAAAA
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel"
aria-labelledby="pills-contact-tab">
...
</div>
</div>
<div class="links">
{{$query->links()}}
</div>
</div>
</div>
@endsection
javascript 只是将其他选项卡中的内容附加到当前页面。我不知道这是怎么回事。我希望第一个选项卡显示用户帖子，当我单击第二个选项卡时，我希望它替换当前显示的所有内容。