内容div之间的标签，第一个div在加载时未激活

Question

我有2个div，我需要使用2个导航选项卡在第1年和第2年之间进行导航。单击第1年时，导航工作正常，出现“第一个” div，第二个div相同。我的问题是，首次加载页面时，两个div都不活动。如何使首次加载页面时始终显示“ first” div？我浏览了许多帖子，但仍然无法解决

即首次加载页面时，在我单击它们之前都不会显示任何标签

页面加载时看起来应该像这样：

当前代码：

section {
  padding: 150px 0;
}

header {
  padding: 156px 0 100px;
}

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.it-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}

.tu-icon a:hover {
  transform: rotate(5deg);
}


.os-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.os-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}




.tabs .nav-tabs > li, .tabs .nav-pills > li {
  float: none;
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 5px;
}

.tabs .nav-tabs {
  text-align: center;
  border-bottom: 0;
  margin-bottom: 20px;
}

.tabs .nav-tabs li:not(:last-child) {
  margin-right: 10px;
}

.tabs .nav-tabs li a {
  text-transform: capitalize;
  font-size: 20px;
  padding: 10px 25px;
  border: 2px solid #4582EC;
  border-radius: 0;
  transition: all .3s ease;
  font-weight: 600;
  color: #4582EC;
  font-family: "Source Sans Pro", sans-serif;
}

.tabs .nav-tabs li a:hover {
  background: #4582EC;
  color: #fff;
  border: 2px solid #4582EC;
}

.tabs .nav-tabs li.active a {
  color: #fff;
  background: #4582EC;
  border: 2px solid #4582EC;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .contents {
  margin-left: 30px;
}



.tab-content {
  position: relative;
  float: left;
  width: 100%;
  z-index: 99;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .section-title h3 {
  position: relative;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 45px;
  color: #000;
  text-transform: uppercase;
}

.service-box .section-title h3:before {
  position: absolute;
  left: 0px;
  content: '';
  bottom: 0px;
  background: #333333;
  height: 1px;
  width: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<section id="education" style="background-color:whitesmoke;">
    <div class="container">
      <div class="row d-flex no-gutters">
        <div class="col-lg-12 mx-auto">
          <h2 style="text-align: center;"> Education </h2>

          <div class="row">
            <br>
            <br>

            <div class="col-md-8">

              <!--tabs-->
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  <li role="presentation" class="active">
                    <a href="#first" data-toggle="tab"> First Year </a>
                  </li>
                  <li role="presentation">
                    <a href="#second" data-toggle="tab"> Second Year </a>
                  </li>
                </ul>
              </div>
              <!--Start single tab content-->
              <div class="tab-content">

                <div class="service-box tab-pane fade in active row" id="first">
                  <div class="contents">

                    <div class="section-title">
                      <br>
                      <h3> First Year</h3>
                      <br>
                    </div>

                   <div class="col-md-8 animate-box">
                      <div class="progress-wrap">
                        <h3>Photoshop</h3>
                        <div class="progress" style="width: 100%;">
                          <div class="progress-bar  color-1" role="progressbar" aria-valuenow="90"
                            aria-valuemin="0" aria-valuemax="100" style="width:90%">
                            <span>90%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                      <div class="progress-wrap ftco-animate">
                        <h3>jQuery</h3>
                        <div class="progress">
                          <div class="progress-bar color-2" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                            aria-valuemax="100" style="width:85%">
                            <span>85%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                    </div>
                  </div>
                </div>
                <!--End single tab content-->
                <!--Start single tab content-->
                <div class="service-box tab-pane fade in" id="second">
                  <div class="contents">

                    <div class="section-title">
                      <br>
                      <h3> Second Year</h3>
                      <br>
                    </div>

                    <div class="col-md-8 animate-box">
                      <div class="progress-wrap">
                        <h3>Java</h3>
                        <div class="progress" style="width: 100%;">
                          <div class="progress-bar color-1" role="progressbar" aria-valuenow="90"
                            aria-valuemin="0" aria-valuemax="100" style="width:90%">
                            <span>90%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                      <div class="progress-wrap ftco-animate">
                        <h3>C#</h3>
                        <div class="progress">
                          <div class="progress-bar color-2" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                            aria-valuemax="100" style="width:85%">
                            <span>85%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                    </div>
                  </div>
                </div>
                <!--End single tab content-->



              </div>


            </div>

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

Answer 1

我猜你正在使用Bootstrap JS ...

$('#education .tabs a:first').tab('show');

Bootstrap docs

Answer 2

您可以将show类添加到<div class="service-box tab-pane fade in active row show" id="first">元素中以默认显示。

将类直接添加到您的元素中比使用代码更好，因为如果在代码运行时该元素不存在，它将不会执行任何操作。如果您将代码放在onLoad函数中，则页面加载需要花费时间，您会发现闪烁。

此外，由于引导程序将active类放置在a元素上，并且您的active样式位于li标记上，因此必须更改活动选项卡。您必须将活动样式放在li标记上。我已经在下面的代码，HTML和CSS中做到了这一点。

活动类现在为：

   .tabs .nav-tabs li a.active {
      color: #fff;
      background: #4582EC;
      border: 2px solid #4582EC;
    }

默认情况下，以下元素上是活动类：

<a href="#first" data-toggle="tab" class="active"> First Year </a>

以下示例：

section {
  padding: 150px 0;
}

header {
  padding: 156px 0 100px;
}

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.it-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}

.tu-icon a:hover {
  transform: rotate(5deg);
}


.os-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.os-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}




.tabs .nav-tabs > li, .tabs .nav-pills > li {
  float: none;
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 5px;
}

.tabs .nav-tabs {
  text-align: center;
  border-bottom: 0;
  margin-bottom: 20px;
}

.tabs .nav-tabs li:not(:last-child) {
  margin-right: 10px;
}

.tabs .nav-tabs li a {
  text-transform: capitalize;
  font-size: 20px;
  padding: 10px 25px;
  border: 2px solid #4582EC;
  border-radius: 0;
  transition: all .3s ease;
  font-weight: 600;
  color: #4582EC;
  font-family: "Source Sans Pro", sans-serif;
}

.tabs .nav-tabs li a:hover {
  background: #4582EC;
  color: #fff;
  border: 2px solid #4582EC;
}

.tabs .nav-tabs li a.active {
  color: #fff;
  background: #4582EC;
  border: 2px solid #4582EC;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .contents {
  margin-left: 30px;
}



.tab-content {
  position: relative;
  float: left;
  width: 100%;
  z-index: 99;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .section-title h3 {
  position: relative;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 45px;
  color: #000;
  text-transform: uppercase;
}

.service-box .section-title h3:before {
  position: absolute;
  left: 0px;
  content: '';
  bottom: 0px;
  background: #333333;
  height: 1px;
  width: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<section id="education" style="background-color:whitesmoke;">
    <div class="container">
      <div class="row d-flex no-gutters">
        <div class="col-lg-12 mx-auto">
          <h2 style="text-align: center;"> Education </h2>

          <div class="row">
            <br>
            <br>

            <div class="col-md-8">

              <!--tabs-->
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  <li role="presentation">
                    <a href="#first" data-toggle="tab" class="active"> First Year </a>
                  </li>
                  <li role="presentation">
                    <a href="#second" data-toggle="tab"> Second Year </a>
                  </li>
                </ul>
              </div>
              <!--Start single tab content-->
              <div class="tab-content">

                <div class="service-box tab-pane fade in active row show" id="first">
                  <div class="contents">

                    <div class="section-title">
                      <br>
                      <h3> First Year</h3>
                      <br>
                    </div>

                   <div class="col-md-8 animate-box">
                      <div class="progress-wrap">
                        <h3>Photoshop</h3>
                        <div class="progress" style="width: 100%;">
                          <div class="progress-bar  color-1" role="progressbar" aria-valuenow="90"
                            aria-valuemin="0" aria-valuemax="100" style="width:90%">
                            <span>90%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                      <div class="progress-wrap ftco-animate">
                        <h3>jQuery</h3>
                        <div class="progress">
                          <div class="progress-bar color-2" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                            aria-valuemax="100" style="width:85%">
                            <span>85%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                    </div>
                  </div>
                </div>
                <!--End single tab content-->
                <!--Start single tab content-->
                <div class="service-box tab-pane fade in" id="second">
                  <div class="contents">

                    <div class="section-title">
                      <br>
                      <h3> Second Year</h3>
                      <br>
                    </div>

                    <div class="col-md-8 animate-box">
                      <div class="progress-wrap">
                        <h3>Java</h3>
                        <div class="progress" style="width: 100%;">
                          <div class="progress-bar color-1" role="progressbar" aria-valuenow="90"
                            aria-valuemin="0" aria-valuemax="100" style="width:90%">
                            <span>90%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                      <div class="progress-wrap ftco-animate">
                        <h3>C#</h3>
                        <div class="progress">
                          <div class="progress-bar color-2" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                            aria-valuemax="100" style="width:85%">
                            <span>85%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                    </div>
                  </div>
                </div>
                <!--End single tab content-->



              </div>


            </div>

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