另一个容器中的图像背景

Question

我创建了一个带标签的滑块。每个选项卡必须包含相应的背景图像。但在我的例子中，图像必须位于元素的背景中。单击选项卡时，图像必须更改可以这样做吗？

        <header class="header">
            <div class="first_slider">
                <div class="tabsy">

                    <input type="radio" id="tab1" name="tab" checked>
                    <label class="tabButton" for="tab1"><span class="btn_content">école</span></label>
                    
                    <div class="tab">
                        <div class="content">
                            <img src="./app/img/slider_2.jpg" alt="">
                            <h3>Un printemps robotique à Arts et Métiers</h3>
                            <p>Le campus Arts et Métiers de Lille, se positionne comme un acteur incontournable de la robotique par ses activités de formation, de recherche et de transfert technologique. </p>
                            <a href=""> <i class="fas fa-angle-right"></i> Lire plus</a>
                        </div>
                    </div>
        
                    <input type="radio" id="tab2" name="tab">
                    <label class="tabButton" for="tab2"><span class="btn_content">Robotique</span> </label>
                    
                    <div class="tab">
                        <div class="content">
                            <h3>Heading 2</h3>
                            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <a href=""><i class="fas fa-angle-right"></i> Lire plus</a>
                        </div>
                    </div>
        
                    <input type="radio" id="tab3" name="tab">
                    <label class="tabButton" for="tab3"><span class="btn_content">industrie du futur</span> </label>
                    
                    <div class="tab">
                        <div class="content">
                            <h3>Heading 3</h3>
                            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <a href=""><i class="fas fa-angle-right"></i> Lire plus</a>
                        </div>
                    </div>
        
                </div>
            </div>
            <div class="second_slider">

            </div>
        </header>

Answer 1

我还在想明白你的意思。但这就是我的解释。

$('.tab').click(function() {
  switch($(this).attr('id'))
  {
   case "tab1":
     $('header').css('background-image', 'url(imagefile1)');
   break;
    case "tab2":
     $('header').css('background-image', 'url(imagefile2)');
   break;
    case "tab3":
     $('header').css('background-image', 'url(imagefile3)');
   break;
  }
});

.tab{
  width:50px;
  height:20px;
  float:left;
  border:2px solid black;
  margin: 2px;
  padding:2px;
}

.header{
  width:500px;
  height:250px;
  border:1px solid black;
  background
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabContainer">
  <div class="tab" id="tab1"> TAB 1</div>
  <div class="tab" id="tab2"> TAB 2</div>
  <div class="tab" id="tab3"> TAB 3</div>
</div>

<header class="header">
  
</header>

另一个容器中的图像背景

image background in another container

css

tags

tabs

image