在外面改变图像 selector on bootstrap, but linked with this selector

问题描述 投票：0回答：2

看这个图片：

Bootstrap selector

我正在使用改编的白兰度主题。我想在使用选择器时更改图像，但我只能更改文本，我知道原因。我将在底部发布代码，但在代码中我定义了一个背景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: To explain why my question is different of that marked as "duplicate" : In the suggested example, the two elements were not working, but they was INSIDE the same "mother div". I couldn't do that because the elements on the selector were on the right, and the image was on the left.

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

javascript php html5 twitter-bootstrap twitter-bootstrap-3
2个回答
0
投票

在与“重复”示例挣扎并且没有得到任何结果之后，我尝试了“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>

这是我的div，用我创建的Javascript：

   <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 -->
0
投票

作为概念证明，这里是一个控制两个独立的.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.