在引导程序上更改 <ul> 选择器外部的图像，但与此选择器链接

Question

看这张图片：

我正在使用改编的白兰度主题。我想在使用选择器时更改图像，但我只能更改文本，我知道为什么。我将在底部发布代码，但在代码上我用

定义了一个背景 div

col-md-6 col-sm-6 col-xs-12

和右边的项目选择器有这个

col-md-12 col-sm-12

显然，当我尝试在任何较小的 div 中重复较大的 div 时，它无法正常工作。在选择器上方，我有这个：

                    <!-- section image -->
                <div class="col-md-6 col-sm-6 col-xs-12 no-padding architecture-title cover-background overflow-hidden " style="background-image:url('images/complexo.jpg');"> </div>
                <!-- end section image -->

我试图创建一个 PHP/Javascript 变量，但我有点新，我仍然不知道如何正确地做到这一点。我正在考虑将背景图像放在 PHP 变量上或使用 javascript，但我真的不知道该怎么做。代码如下：

        <!-- about section -->
        <section id="complexo" class="wow fadeIn no-padding">
            <div class="container-fluid">
                <div class="row">
                    <!-- section image - HERE IS THE IMAGE THAT I WANT TO LINK WITH THE SELECTOR, AS YOU CAN SEE, THE DIV HAS A DIFFERENT COLUMN CONFIGURATION, SO I CAN'T PUT ONE INSIDE ANOTHER -->
                    <div class="col-md-6 col-sm-6 col-xs-12 no-padding architecture-title cover-background overflow-hidden " style="background-image:url('images/complexo.jpg');"> </div>
                    <!-- end section image -->
                    <!-- section title -->
                    <div class="col-md-6 col-sm-6 col-xs-12 no-padding architecture-title sm-min-height-auto">
                        <div class="architecture-section">
                            <span class="title-extra-large alt-font font-weight-600 text-uppercase deep-gray-text display-block sm-title-large"> CONHEÇA O COMPLEXO</span>
							<br><br>
							
							  <!-- tab navigation - HERE IS THE SELECTOR -->
                            <ul class="nav nav-tabs alt-font text-uppercase letter-spacing-1 no-border font-weight-600" role="tablist">
                                <li role="presentation" class="active xs-display-block xs-margin-nine xs-no-margin-lr xs-no-margin-top"><a href="#creativity" aria-controls="creativity" role="tab" data-toggle="tab" class="xs-display-inline ">Viva</a></li>
                                <li role="presentation" class="xs-display-block xs-margin-nine xs-no-margin-lr xs-no-margin-top"><a href="#innovation" aria-controls="innovation" role="tab" data-toggle="tab" class="xs-display-inline ">Trabalhe</a></li>
                                <li role="presentation" class="xs-display-block xs-margin-nine xs-no-margin-lr xs-no-margin-top"><a href="#point-of-view" aria-controls="point-of-view" role="tab" data-toggle="tab" class="xs-display-inline ">Aproveite</a></li>
                            </ul>
                            <!-- end tab navigation -->
                            <div class="tab-content clearfix margin-twenty no-margin-lr no-margin-bottom sm-margin-nine sm-no-margin-lr sm-no-margin-bottom">
                                <!-- tab item -->
                                <div role="tabpanel" class="tab-pane fade in active" id="creativity">
                                    <div class="col-md-12 col-sm-12 no-padding"> <!-- ANY TAB ITEM HAVE A SMALLER COLUMN CONFIGURATION, SO I CAN'T JUST PUT THE BIGGER DIV HERE-->
                                        <p class="text-medium width-70 md-width-90 sm-width-100">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p><br>
                                        <p class="text-medium width-70 md-width-90 sm-width-100">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
                                    </div>
                                </div>
                                <!-- end tab item -->
                                <!-- tab item -->
                                <div role="tabpanel" class="tab-pane fade in" id="innovation">
                                    <div class="col-md-12 col-sm-12 no-padding">
                                        <p class="text-medium width-70 md-width-90 sm-width-100">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p><br>
                                        <p class="text-medium width-70 md-width-90 sm-width-100">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum has been the industry's standard dummy.</p>
                                    </div>
                                </div>
                                <!-- end tab item -->
                                <!-- tab item -->
                                <div role="tabpanel" class="tab-pane fade in" id="point-of-view">
                                    <div class="col-md-12 col-sm-12 no-padding">
                                        <p class="text-medium width-70 md-width-90 sm-width-100">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p><br>
                                        <p class="text-medium width-70 md-width-90 sm-width-100">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
                                    </div>
                                </div>
                                <!-- end tab item -->
                       
                        </div>
                    </div>
                    <!-- end section title -->
                </div>
            </div>
   
        </section>
        <!-- end about section -->

PS：解释为什么我的问题与标记为“重复”的问题不同：在建议的示例中，这两个元素不起作用，但它们在同一个“母 div”内。我不能这样做，因为选择器上的元素在右边，而图像在左边。

所以，我通过 Javascript 解决了它，现在它可以正常工作了。

Answer 1

在尝试了“重复”示例并且没有得到任何结果之后，我尝试了“onclick”功能。这是我之后的选择按钮：

<ul class="nav nav-tabs alt-font text-uppercase letter-spacing-1 no-border font-weight-600" role="tablist">
                            <li role="presentation" class="active xs-display-block xs-margin-nine xs-no-margin-lr xs-no-margin-top"><a href="#creativity" onclick="viva();" aria-controls="creativity" role="tab" data-toggle="tab" class="xs-display-inline ">Viva</a></li>
                            <li role="presentation" class="xs-display-block xs-margin-nine xs-no-margin-lr xs-no-margin-top"><a href="#innovation" onclick="trabalhe();" aria-controls="innovation" role="tab" data-toggle="tab" class="xs-display-inline ">Trabalhe</a></li>
                            <li role="presentation" class="xs-display-block xs-margin-nine xs-no-margin-lr xs-no-margin-top"><a href="#point-of-view" onclick="aproveite();" aria-controls="point-of-view" role="tab" data-toggle="tab" class="xs-display-inline ">Aproveite</a></li>
                        </ul>

这是我创建的 Javascript 的 div：

   <script>
   
   
   function trabalhe() {
   
   document.getElementById('imagem').classList.add('trabalhe'); //add
document.getElementById('imagem').classList.remove('viva'); //remove
document.getElementById('imagem').classList.remove('aproveite'); //remove
   
   
}
   
    function viva() {
   
   document.getElementById('imagem').classList.add('viva'); //add
document.getElementById('imagem').classList.remove('trabalhe'); //remove
document.getElementById('imagem').classList.remove('aproveite'); //remove
   
   
}


function aproveite() {
   
   document.getElementById('imagem').classList.add('aproveite'); //add
document.getElementById('imagem').classList.remove('trabalhe'); //remove
document.getElementById('imagem').classList.remove('viva'); //remove
   
   
}
   
   
   
   </script>

.viva {	background-image:url('../images/viva.jpg'); }
.trabalhe {	background-image:url('../images/trabalhe.jpg'); }
.aproveite {	background-image:url('../images/aproveite.jpg'); }

 <!-- section image -->
                    <div class="col-md-6 col-sm-6 col-xs-12 no-padding architecture-title cover-background overflow-hidden viva " id="imagem"> </div>
 
                    <!-- end section image -->

Answer 2

作为概念证明，这里是一个最小的代码示例，单个 .nav-tab 控制两个独立的 .tabpanel 容器及其活动内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="col-xs-6">
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="tab1">
        <img src="http://placehold.it/800x400&text=1" class="img-responsive" />
      </div>

      <div role="tabpanel" class="tab-pane fade in" id="tab2">
        <img src="http://placehold.it/800x400&text=2" class="img-responsive"  />
      </div>

      <div role="tabpanel" class="tab-pane fade in" id="tab3">
        <img src="http://placehold.it/800x400&text=3" class="img-responsive"  />
      </div>
      
    </div>
  </div>

  <div class="col-xs-6">
    <h1>Your Page Header</h1>
    
    <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" data-target="#tab1, #tab1_img" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#tab2" data-target="#tab2, #tab2_img" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation"><a href="#tab3"data-target="#tab3, #tab3_img" role="tab" data-toggle="tab">Tab 3</a></li>
    </ul>
    
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="tab1">
        <p>Tab #1 Contents</p>
      </div>
      
      <div role="tabpanel" class="tab-pane fade in" id="tab2">
        <p>Tab #2 Contents</p>
      </div>

      <div role="tabpanel" class="tab-pane fade in" id="tab3">
        <p>Tab #3 Contents</p>
      </div>
    </div>
  </div>
</div>