为什么当我点击我的标签时它没有打开？您尚未添加 javascript 来执行此操作

如何解决为什么当我点击我的标签时它没有打开？您尚未添加 javascript 来执行此操作

我只能看到我默认激活的选项卡。但是当我点击其他标签时，我什么也看不到。他们只是不会打开。我这里有什么错误？需要你的帮助。我试图在 bootstrap 文档中找到解决方案，但我没有遇到这样的事情。顺便说一下，我只是在学习引导程序。但这就像我只是复制和粘贴，这是错误的吗？我应该怎么学这个？似乎比 css 难一些。因为有很多类是默认写的。。我不想背了。那么我在需要时复制和粘贴有用吗？

body .container-fluid {
    padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work,but on google developer tools I saw that container-fluid had padding right,and left. So making them 0.*/
}
body {
    text-align: center;
}
.title-image {
    width:100%;
}

.download-button {
    margin: 15px 13px;
}

.big-heading {
    font-family:  "Montserrat","sans-serif";
    font-weight: bold;
    font-size: 2.2rem;
    line-height:1.5;
    margin-top: 70px;
}

.first_part {
    color: white;
    background-color: #F27E48;
    text-align: left;
}

.container-fluid {
    padding: 3% 3% 6% 5% !important;
}

.navbar-brand {
    font-family: 'Ubuntu',sans-serif;
    
}

#courses {
    padding:50px 100px 50px;
    background-color: azure;
}
#courses>p{ /*only for child p of courses id,not grandchild etc */
    width:60%;
    margin: 18px auto 24px;
}
.card-body p{
    text-align: left;
}

#how {
    padding:50px 70px 50px;
    background-color: rgb(243,243,178);
}
#how img {
    height:280px;
    width:330px;
}
.row div {
    margin-top:10px;
}

.outcome {
    width:70%;
    margin:20px auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Data Science Course Web Page</title>
    <link rel="stylesheet" href="styles.css">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</head>
<body>
    <section class="first_part" >
        <div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
            <nav class="navbar navbar-expand-lg navbar-light">        
                <a class="navbar-brand" href="#">
                    <i class="fab fa-python"> Python Bootcamp</i>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#courses">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#how">How We Work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#outcomes">Outcomes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>                 
                    </ul>
                </div>
            </nav>

            <!-- Title -->
            <div class="row">
                <div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops,and bigger screens-->
                    <h1 class="big-heading">Download the best Python bootcamp on your device,and start to study now.</h1>
                    <button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
                    <button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>                    

                </div>

                <div class="col-lg-6">
                    <img class="title-image" src="image.jpg" alt="classroom-image">
                </div>

            </div>
        </div>            
    </section>

    <!-- Courses -->
    <section id="courses">
        <h2>Our Course Options</h2>
        <p>All of our programs provide job guarantee. No matter where you live,and what nationality you are. Our proven system works all around the world.</p>

        <div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width,for small screens it takes 50% -->
            <div class="col-lg-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <h3>Online Program</h3>
                    </div>
                    <div class="card-body">
                        <h4>100$ / mo</h4>
                        <p>Unlimited watch time for the saved videos</p>
                        <p>5 mins talking to the instructor per day on skype</p>
                        <p>Unlimited limit of asking questions on the app</p>
                        <p>Must be finished in 6 months</p>
                        <button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <h3>Full Time Program</h3>
                    </div>
                    <div class="card-body">
                        <h4>250$ / mo</h4>
                        <p>Unlimited watch time for the saved videos</p>
                        <p>20 mins talking to the instructor per day on skype</p>
                        <p>Unlimited limit of asking questions on the app</p>
                        <p>2 months</p>
                        <button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h3>Part Time Program</h3>
                    </div>
                    <div class="card-body">
                        <h4>175$ / mo</h4>
                        <p>Unlimited watch time for the saved videos</p>
                        <p>10 mins talking to the instructor per day on skype</p>
                        <p>Unlimited limit of asking questions on the app</p>
                        <p>4 months</p>
                        <button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How we work -->
    <section id="how">
        <h2>How We Work</h2>
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <p>One-on-one mentorship and guidance.</p>
                <img src="coding.jpg" alt="coding-image">
            </div>

            <div class="col-lg-4 col-sm-6">
                <p>Study schedules that fit with your life.</p>
                <img src="clock.jpg" alt="coding-image">
            </div>
            <div class="col-lg-4">
                <p>In-person meetups,workshops.</p>
                <img src="meetup.jpg" alt="meetup-image">
            </div>
        </div>
    </section>

    <!-- Outcomes -->
    <section id="outcomes">
        <div class="outcome">

            <!-- Tabs navs -->
            <ul class="nav nav-tabs nav-justified" id="ex1" role="tablist">
                <li class="nav-item" role="presentation">
                <a class="nav-link active" id="ex3-tab-1" data-mdb-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
                
                </li>
    
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="ex3-tab-2" data-mdb-toggle="tab" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false">Part Time Program</a>
                   
                    </li>
                </li>
    
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="ex3-tab-3" data-mdb-toggle="tab" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false">Online Program</a>
                     
                </li>
            </ul>

            <!-- Tabs Content-->
            <div class="tab-content" id="ex2-content">
                <div
                  class="tab-pane fade show active"
                  id="ex3-tabs-1"
                  role="tabpanel"
                  aria-labelledby="ex3-tab-1"
                >
                    <p>$70,000</p>
                    <p>Median pay rate graduates reported earning.</p>
                    <p>80%</p>
                    <p>Employed in-field within 90 days of graduation.</p>
                </div>

                <div
                  class="tab-pane fade"
                  id="ex3-tabs-2"
                  role="tabpanel"
                  aria-labelledby="ex3-tab-2"
                >
                    <p>$60,000</p>
                    <p>Median pay rate graduates reported earning.</p>
                    <p>75%</p>
                    <p>Employed in-field within 110 days of graduation.</p>
                </div>
                <div
                  class="tab-pane fade"
                  id="ex3-tabs-3"
                  role="tabpanel"
                  aria-labelledby="ex3-tab-3"
                >
                    <p>$40,000</p>
                    <p>Median pay rate graduates reported earning.</p>
                    <p>65%</p>
                    <p>Employed in-field within 150 days of graduation.</p>  
                </div> 
            </div>   
        </div>     
    </section>
    
</body>
</html>

解决方法

Bootstrap5 文档中的示例说要使用：data-bs-toggle，你有 data-mdb-toggle。这应该可以为您的所有导航链接修复它。

<a class="nav-link active" id="ex3-tab-1" data-bs-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>

https://getbootstrap.com/docs/5.0/components/navs-tabs/#base-nav

您尚未添加 javascript 来执行此操作。

将此 javascript 添加到您的代码中。

var triggerTabList = [].slice.call(document.querySelectorAll("#ex1 li a"));
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl);

  triggerEl.addEventListener("click",function (event) {
    event.preventDefault();
    tabTrigger.show();
  });
});

文档：https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

代码笔：https://codepen.io/manaskhandelwal1/pen/eYdLYdN

bootstrap javascript 的脚本标签应该添加在 body 标签之后而不是 head 标签中，有时这也会产生问题。而且您不必学习任何引导类，逐渐地您将自动学习它们。如果您需要任何其他帮助，请在此处发表评论，我会尽快帮助您?。

为什么当我点击我的标签时它没有打开？ 您尚未添加 javascript 来执行此操作

如何解决为什么当我点击我的标签时它没有打开？ 您尚未添加 javascript 来执行此操作

解决方法

您尚未添加 javascript 来执行此操作。

相关推荐

为什么当我点击我的标签时它没有打开？您尚未添加 javascript 来执行此操作

如何解决为什么当我点击我的标签时它没有打开？您尚未添加 javascript 来执行此操作