javascript - 使用标签切换 背景

Question

我想做的是让选项卡更改该部分中显示的背景图像。

类似于这个jsfiddle - http://jsfiddle.net/r6r7U/12/

但我无法让该方法为我工作。如何更改每个选项卡的图像？例如 - tab 1 显示 background1，tab2 显示 background2，等等。

本网站上有一个工作示例 - https://www.vidyard.com/

.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.page-section.page-section-center {
  align-content: center;
  text-align: center;
}
.page-section.page-section-lg {
  padding-top: 50px;
  padding-bottom: 50px;
}
.page-section.page-section-white {
  background-color: #fff;
}
}
.help-nav-tabs .nav-tabs {
  font-size: 16px;
}
.help-nav-tabs .nav-tabs > li.active > a {
  background-color: transparent !important;
  border: 0px transparent solid !important;
  font-weight: 500 !important;
}
.help-nav-tabs .nav-tabs a {
  border-bottom: 4px solid #2db2e9 !important;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a {
  border-bottom: 0px transparent solid !important;
  color: #32404E;
  font-weight: 400;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a:hover {
  background-color: transparent !important;
  border: 0px !important;
  color: #50667d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> rel="stylesheet" />
<section class="page-section page-section-xlg page-section-center page-section-white help-nav-tabs page-section-no-bd">
  <div class="container">
    <div class="col-md-offset-2 col-md-8">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs nav-justified" id="help-tabs">
        <li class="active">
          <a href="#how-ot-maintenance" data-toggle="tab" aria-expanded="true" data-no-scroll>
                        Maintenance
                    </a>
        </li>
        <li class="">
          <a href="#how-ot-crm" data-toggle="tab" aria-expanded="true" data-no-scroll>
                        Sales &amp; Marketing
                    </a>
        </li>
        <li class="">
          <a href="#how-ot-projects" data-toggle="tab" aria-expanded="true" data-no-scroll>
                        Project Management
                    </a>
        </li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content wrap wrap-bt wrap-bt-lg">
        <div class="tab-pane fade in active" id="how-ot-maintenance">
          <h2>Control Costs</h2>
        </div>
        <div class="tab-pane fade" id="how-ot-crm">
          <h2>Customer</h2>
        </div>
        <div class="tab-pane fade" id="how-ot-projects">
          <h2>Take</h2>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Bootstrap 需要 jQuery。添加 jQuery 后，您可以看到演示的效果。我添加了单独的背景颜色，以便您可以更好地看到变化。简单地用和图像替换背景颜色。

/* START OF EDIT */

* {
  color: #ffffff !important;
}
#main {
  transition: background 0.3s;
  position: relative;
  background: transparent;
}
.tab-background {
  height: 100%;
  width: 100%;
  background: #ff9000 no-repeat center center / cover;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s;
  position: absolute;
}
li.active .tab-background {
  opacity: 1;
}

/* END OF EDIT */

.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.page-section.page-section-center {
  align-content: center;
  text-align: center;
}
.page-section.page-section-lg {
  padding-top: 50px;
  padding-bottom: 50px;
}
.page-section.page-section-white {
  background-color: #fff;
}
}
.help-nav-tabs .nav-tabs {
  font-size: 16px;
}
.help-nav-tabs .nav-tabs > li.active > a {
  background-color: transparent !important;
  border: 0px transparent solid !important;
  font-weight: 500 !important;
}
.help-nav-tabs .nav-tabs a {
  border-bottom: 4px solid #2db2e9 !important;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a {
  border-bottom: 0px transparent solid !important;
  color: #32404E;
  font-weight: 400;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a:hover {
  background-color: transparent !important;
  border: 0px !important;
  color: #50667d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<section id="main" class="page-section page-section-xlg page-section-center page-section-white help-nav-tabs page-section-no-bd">
  <div class="container">
    <div class="col-md-offset-2 col-md-8">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs nav-justified" id="help-tabs">
        <li class="active">
          <div class="tab-background" style="background-image: url(http://www.animalfactguide.com/wp-content/uploads/2015/09/sloth4_full.jpg);"></div>
          <a href="#how-ot-maintenance" data-background-color="white" data-toggle="tab" aria-expanded="true" data-no-scroll>
                        Maintenance
                    </a>
        </li>
        <li class="">
          <div class="tab-background" style="background-image: url(http://www.euclidlibrary.org/images/tickle-your-brain/slotheatingleaf.jpg?sfvrsn=0);"></div>
          <a href="#how-ot-crm" data-toggle="tab" data-background-color="rebeccapurple" aria-expanded="true" data-no-scroll>
                        Sales &amp; Marketing
                    </a>
        </li>
        <li class="">
          <div class="tab-background" style="background-image: url(http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.jpg.adapt.945.1.jpg);"></div>
          <a href="#how-ot-projects" data-toggle="tab" data-background-color="indianred" aria-expanded="true" data-no-scroll>
                        Project Management
                    </a>
        </li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content wrap wrap-bt wrap-bt-lg">
        <div class="tab-pane fade in active" id="how-ot-maintenance">
          <h2>Control Costs</h2>
        </div>
        <div class="tab-pane fade" id="how-ot-crm">
          <h2>Customer</h2>
        </div>
        <div class="tab-pane fade" id="how-ot-projects">
          <h2>Take</h2>
        </div>
      </div>
    </div>
  </div>
</section>