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>

只需使用＆＃34;交换（＆＃39; div想要隐藏＆＃39;，＆＃39; div想要显示＆＃39;）＆＃34;如你所愿。

因此最终结果将使第一个div消失，第二个重新出现在它的位置。因此，最初将您想要显示的div从开头设置为将其类设置为＆＃34;显示＆＃34;然后所有其他div作为＆＃34;隐藏＆＃34;。

希望这有用并回答您的问题。如果没有，请随时再询问：）

用div替换div而在同一页面上只有几个按钮

1 个答案: