我很难让Bootstrap上班

Question

我试图让Bootstrap选项卡进行工作，但我遇到了麻烦。当我单击选项卡时，它不会显示正确的内容。这是我的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

代码

    <ul class="nav nav-tabs MentorProfile_Tabs">
        <li class="active nav-link"><a data-toggle="tab" href="#experience">Experience</a></li>
        <li class="nav-link"><a data-toggle="tab" href="#reviews">Reviews {{numReviews}}</a></li>
    </ul>


    <div class="tab-content">
        <div id="experience" class="tab-pane fade in active" role="tabpanel">
            {{#experience}}
                <div class="row MentorProfile_ExperienceItem">
                    <div class="col-md-2"></div>
                    <div class="col-md-7">
                        <p class="MentorProfile_ExperienceItemTitle">{{title}}</p>
                        <p class="MentorProfile_ExperienceItemCompany">{{company}}</p>
                    </div>
                    <div class="col-md-3">
                        <p class="MentorProfile_ExperienceItemDate">{{dateString}}</p>
                    </div>
                </div>
            {{/experience}}
        </div>
        <div id="reviews" class="tab-pane fade" role="tabpanel">
            <div class="row MentorProfile_Reviews">
                {{#reviews}}
                    <div class="row MentorProfile_Review">
                        <div class="row">
                            <div class="col-sm-8 MentorProfile_Reviews_UserName">{{firstName}} {{lastName}}</div>
                            <div class="col-md-4">{{{ratingHtml}}}</div>
                        </div>
                        <div class="row MentorProfile_Reviews_UserReview">
                            {{review}}
                        </div>
                    </div>
                {{/reviews}}
                {{^reviews}}
                    <div class="row MentorProfile_Review">There are no reviews for this mentor at this time.</div>
                {{/reviews}}
            </div>
        </div>
    </div>

Answer 1

Bootstrap 5 Tabs的工作方式几乎不同。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>