javascript - 引导选项卡在初始加载时加载 videoGrid 内容，但是当单击第二个选项卡，然后再次单击第一个选项卡时，它会加载第二个选项卡内容

Question

我完成了有关如何从 Udemy 创建 youtube 克隆课程的课程。一切都很顺利，除了过去 3 天里让我非常恼火的一些糟糕的错误。有问题的是用于用户个人资料信息页面（youtube 的用户频道页面）的引导选项卡。个人资料信息页面有一个引导选项卡部分，用于加载用户上传的视频，以及他们的个人信息，比如总共有多少观看次数等......

我已经使用 bootrap 有一段时间了，一切正常，从他们的站点复制代码或 stackoverflow 也没有任何问题。在过去的 25 年里，我认为自己对复制和粘贴编程非常有信心。所以，发生的事情是，一旦我复制了引导 javascript 代码片段，然后运行它以查看它是否正常，它没有工作，这根本没有附加任何代码，所以我知道有些事情发生了. 但是，我将所有 Udemy 的 Instructor 代码粘贴到选项卡部分，但它从未起作用。感谢 StackOverflow，我设法让它正常运行。到目前为止，我从 tab1 加载了所有视频，并从 tab2 加载了信息。但是，当单击返回 2 tab1 时，它会再次加载用户信息。我已经梳理了我可以从这里得到的所有东西，并且引导，没有任何工作。所以我在这里包含了处理选项卡和加载内容的 2 个公共函数。我需要对这两个函数有新的认识，因为我想不通，我知道它可能很简单，或者可能是 bootstrap 5 的错误。我现在不确定哪个。 ..

public function createTabsSection() {
        return "<ul class='nav nav-tabs' id='profileTabs' role='tablist'>
                        <li class='nav-item' role='presentation'>
                        <a class='nav-link show active' id='videos-tab' data-bs-toggle='tab' 
                        data-bs-target='#video' role='tab' aria-controls='videos' aria-selected='true'>VIDEOS</a>                        
                        </li>
                        <li class='nav-item' role='presentation'>
                        <a class='nav-link' id='about-tab' data-bs-toggle='tab' data-bs-target='#about' role='tab' 
                            aria-controls='about' aria-selected='false'>ABOUT</a>
                        </li>
                </ul>";                
    }
    public function createContentSection() {
        $videos = $this->profileData->getUsersVideos();
        if(sizeof($videos) > 0) {
            $videoGrid = new VideoGrid($this->con, $this->userLoggedInObj);
            $videoGridHtml = $videoGrid->create($videos, null, false);
        }
        else {
            $videoGridHtml = "<span>This user has no videos</span>";
        }
        $aboutSection = $this->createAboutSection();
        return "<div class='tab-content channelContent'>
                    <div class='tab-pane fade in show active' id='videos' role='tabpanel' aria-labelledby='videos-tab'>
                        $videoGridHtml
                    </div>                    
                    <div class='tab-pane fade in' id='about' role='tabpanel' aria-labelledby='about-tab'>
                        $aboutSection
                    </div>
                </div>";               
    }

标签： javascriptphpjquerybootstrap-5