Question

我在屏幕上有3张图片。每个图像应在屏幕的相同位置显示不同的形式，并隐藏其他2个表格。

Image1：点击show form1并隐藏form2和form 3

Image2：点击show form2并隐藏form1和form 3

Image3：点击show form3并隐藏form1和form 2

表格应显示在同一位置。我只是看到一个解决方案，通过在URL中发送一个参数来调用整个页面，说明在屏幕上显示哪个表单。我真的希望显示正确的形式，具体取决于此刻没有点击的图像。

我正在使用HTML5，Bootstrap 4和JavaScript - 任何使用这些语言的建议都是完美的。

Answer 1

这样的事情有很多答案，在提问之前先试着四处寻找。

这是您将只使用JS和HTML

看到的最简单的方法之一

<强>的JavaScript

const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');

const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');

imageOne.addEventListener("click", function() {
    formOne.style.display = "block";
    formTwo.style.display = "none";
    formThree.style.display = "none";
});

imageTwo.addEventListener("click", function() {
    formOne.style.display = "none";
    formTwo.style.display = "block";
    formThree.style.display = "none";
});

imageThree.addEventListener("click", function() {
    formOne.style.display = "none";
    formTwo.style.display = "none";
    formThree.style.display = "block;
});

<强> HTML

<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">

<div id="formOne" style="display: none">
    <form>
        ....
    </form>
</div>

<div id="formTwo" style="display: none">
    <form>
        ....
    </form>
</div>

<div id="formThree" style="display: none">
    <form>
        ....
    </form>
</div>

Answer 2

好的，你需要：

3张图片
3种形式，位置绝对或固定（以便它们保持在同一位置）
附加到每个图像的click事件的JS函数，它将对应的表单样式更改为display:block，其他图像更改为display:none。

类似的东西：

var form1 = document.getElementById('form1')

document.getElementById('form1').onclick = function() {
  form1.style.display = 'block'
  form2.style.display = 'none'
  form3.style.display = 'none'
}

对于每个表单。

这是我用来制作如何操作的工作笔。

https://codepen.io/jaimelopez18/pen/zWOEMw

这都是用纯js（香草）制作的。您应该首先尝试学习这一点，在掌握了它之后，我建议您先看看VueJS。

Answer 3

我根据您的要求在jsFiddle中制作了一个简单的骨架，看看代码。

<强> HTML ：

<html>
  <head>
  <script type='text/javascript' src="jquery.min.js"></script>
  </head>
  <body>
  <div class="jsImgWrp">
    <img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
    <img src="http://via.placeholder.com/350x150" class="jsImg"  data-formid="form2"/>
    <img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
    </div>
    <div class="jsFormWrp form-wrapper">
      <div class="jsFrm form1 active">
        form 1
      </div>
       <div class="jsFrm form2">
        form 2
      </div>
       <div class="jsFrm form3">
        form 3
      </div>
    </div>
  </body>
</html>

<强> CSS ：

.form-wrapper .jsFrm {
  display:none;
  padding:10px;
  border:solid 2px #eee;
  width:200px;
  height:100px;
}
.form-wrapper .jsFrm.active {
  display:block;
}
.jsImgWrp img {
  width:100px;
  display:inline-block;
}

<强>的Javascript ：

$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
  var formId = $(this).data('formid');
  $('.jsFrm').removeClass('active');
  $('.' + formId).addClass('active');
})
});

希望这可以帮助你。

根据点击的图片显示不同的表单

3 个答案: