javascript - 在同一页面上有几个按钮时用 div 替换 div

Question

我在 html 页面中间有一个 div。 它有 4 个链接，里面有图片和一些文本。

我需要的是:当用户点击其中一个链接时，它会完全改变 div(无需重新加载页面)，其中将包含一个图像、另一个文本和一个链接。这 4 个链接需要保留在那里，以便用户可以单击另一个链接并再次获得相同的更改。

除了替换或切换功能之外，我无法编写或找到任何对我有帮助的代码，这些功能仅适用于 2 个元素。

这是我的 HTML 标记:

<div class="container-fluid fullspan offers_content" id="offers_content">
  <div class="row offers">
    <div class="pull-right hidden-xs">
      <a href="#"><img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/></a>
      <a href="#"><img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/></a>
      <a href="#"><img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/></a>
      <a href="#"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>          
    </div>  
    <div class="offers_text col-md-7">
      <p> text </p>
    </div>         
  </div>  
</div><!-- /.container-fluid CONTENT--> 

<div class="container-fluid fullspan offers_content" id="offer_1">
  <div class="row">
    <div class="text-center">
      <div class="pull-right hidden-xs">
        <a href="#"><img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/></a>
        <a href="#"><img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/></a>
        <a href="#"><img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/></a>
        <a href="#"><img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/></a>          
      </div> 
      <div class="offer_text_ad">
        <img src="images/offer1.png" alt="" class="img-responsive offer_image" />
        <p>text-111</p>
        <a href="pages/Services.htm"> read more </a>
      </div>   
    </div>         
  </div>   
</div><!-- /.container-fluid CONTENT-->  

<div class="container-fluid fullspan offers_content" id="offer_2">
  <div class="row">
    <div class="text-center">
      <div class="pull-right hidden-xs">
        <a href="#"><img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/></a>
        <a href="#"><img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/></a>
        <a href="#"><img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/></a>
        <a href="#"><img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/></a>          
      </div> 
      <div class="offer_text_ad">
        <img src="images/offer2.png" alt="" class="img-responsive offer_image" />
        <p>text-222</p>
        <a href="pages/Services.htm"> read more </a>
      </div>   
    </div>         
  </div>  
</div><!-- /.container-fluid CONTENT-->    

<div class="container-fluid fullspan offers_content" id="offer_3">
  <div class="row">
    <div class="text-center">
      <div class="pull-right hidden-xs">
        <a href="#"><img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" /></a>
        <a href="#"><img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" /></a>
        <a href="#"><img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" /></a>
        <a href="#"><img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" /></a>          
      </div> 
      <div class="offer_text_ad">
        <img src="images/offer3.png" alt="" class="img-responsive offer_image" />
        <p>text-333</p>
        <a href="pages/Services.htm"> read more </a>
      </div>   
    </div>         
  </div>    
</div><!-- /.container-fluid CONTENT-->         

<div class="container-fluid fullspan offers_content" id="offer_4">
  <div class="row">
    <div class="text-center">
      <div class="pull-right hidden-xs">
        <a href="#"><img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" /></a>
        <a href="#"><img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" /></a>
        <a href="#"><img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" /></a>
        <a href="#"><img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" /></a>          
      </div> 
      <div class="offer_text_ad">
        <img src="images/offer4.png" alt="" class="img-responsive offer_image" />
        <p>text-444</p>
        <a href="pages/Services.htm">read more </a>
      </div>   
    </div>         
  </div>  
</div><!-- /.container-fluid CONTENT-->    

我的相关 CSS:

.offers_content{
    min-height:450px;
    background-color:#fff;
}

#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
    display:none;   
}

#offers_content{
    display:block;
}

.offer_image{
    margin: 5% auto auto auto;
}

.offer_text_ad>p{
    color:#000;
}

提前致谢。

Answer 1

使用 Javascript 并按照以下方式做一些事情:

function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
   document.getElementById(div1).className('hidden');
   document.getElementById(div2).className('shown');
}

然后像 CSS

 .hidden {
    top: -500px; // forces div above the screen
 }
 .shown {
 // CSS code for the div you want shown
 }

在带有链接的 HTML 中，它可能是

<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>

只需根据需要使用“swap('div you want hidden', 'div you want showed')”。

所以最终结果将使第一个 div 消失，第二个重新出现在它的位置。因此，最初对要显示的 div 进行编码，从一开始就将其类设置为“显示”，然后将所有其他 div 设置为“隐藏”。

希望这对您有所帮助并能回答您的问题。如果没有，请随时询问 :)