个人中心
gpt4 book ai didi

html - 根据单选按钮选择显示、隐藏图像

转载 作者：太空宇宙 更新时间：2023-11-04 08:19:35 24 4
gpt4 key购买 nike

我正在尝试创建一种根据单选按钮选择而变化的交互式图像。

我将所有图像分层放置在相同的位置和大小，并且我希望一个部分中的一个图层在被选中时可见，而其余的则隐藏。这是为了展示您的选择组合的外观。我正在尝试仅使用 HTML 和 CSS 来做到这一点，感觉很接近，但不知道为什么它不起作用。

目前，代码设置为仅对皮革选项进行试验。

    <!doctype html>
    <html>
    <head>

    <style type="text/css">


    label {
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    }

    #baseLayer {
        background-image: url(baseLayer.png);
        width: 100%;

    }

    #choices div {
        float: left;
        padding: 20px;
        position: relative;
    }

    .outerWrapper {
        position: relative;
    }

    .layer {
        position: absolute;
    }

    input#leather1:checked ~ #l1 {
        visibility: visible;
    }

    input#leather2:checked ~ #l2 {
        visibility: visible;
    }

    input#leather1:not(:checked) ~ #l1 {
        visibility: hidden;
    }

    input#leather2:not(:checked) ~ #l2 {
        visibility: hidden;
    }

</style>

<meta charset="UTF-8">
<title>Interactivity</title>
</head>

<body>

<div id="baseLayer" class="outerWrapper">
    <img id="c1" class="layer" src="counter1.png">
    <img id="c2" class="layer" src="counter2.png">
    <img id="f1" class="layer" src="floor1.png">
    <img id="f2" class="layer" src="floor2.png">
    <img id="l1" class="layer" src="leather1.png">
    <img id="l2" class="layer" src="leather2.png">
    <img id="u1" class="layer" src="upholstery1.png">
    <img id="u2" class="layer" src="upholstery2.png">
    <img id="u3" class="layer" src="upholstery3.png">
</div>

<div id="choices">

<div>
      Upholstery:<br/>
      <input type="radio" name="u" id="upholstery1" value="Black">
      <label for="upholstery1">1</label><br>
      <input type="radio" name="u" id="upholstery2" value="blue">
      <label for="upholstery2">2</label><br>
      <input type="radio" name="u" id="upholstery3" value="green">
      <label for="upholstery3">3</label><br>
</div>

<div>
      Leather:<br/>
      <input type="radio" name="l" id="leather1" value="black_leather">
      <label> Black</label><br>
      <input type="radio" name="l" id="leather2" value="brown_leather">
      <label> Brown</label><br>
</div>

<div>
      Floor Cover:<br/>
      <label> 1
      <input type="radio" name="f" value="orange"></label><br>
      <label> 2
      <input type="radio" name="f" value="yellow"></label><br>
</div>

<div>
      Countertop:<br/>
      <label> 1
      <input type="radio" name="c" value="pink"></label><br>
      <label> 2
      <input type="radio" name="c" value="teal"></label><br>
</div>
</div>


</body>
</html>

最佳答案

您的 radio 输入和图像位于不同的 div 中，因此它们无法相互访问。对于选择影响显示的 img 的 radio ，它必须上升到 <div。并退回 #baseLayer .你不能用 css 遍历 DOM 树。您将需要添加一些 javascript。下面是一个示例。

编辑:向 javascript/jquery 添加了一些注释，这样您就可以理解我做了什么以便能够根据您的需要复制它。

$('#choices input').on('change',function(){
  //Getting the content of the label that is right after the input.
  var numb = $(this).next().html();
  
  //Hiding all the with an id that containes the input's name.
  $("img[id*='"+this.name+"']").hide();
  
  //Using the name of the input element and adding the content of the label to it, showing the image with that id.
  $('#'+this.name+numb).show();
    
  });
label {
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    }

    #baseLayer {
        background-color:peachpuff;
        width: 100%;
        padding:15px;
        display:table;
    }
    #choices{
      display:table;
      width:100%;
    }
    #choices div {
        float: left;
        padding: 20px;
        position: relative;
    }
    .column-half{
      float:left;
      width:50%;
      position:relative;
    }
    .outerWrapper {
        position: relative;
    }

    .layer {
        display:block;
    }

    input#leather1:checked ~ #l1 {
        visibility: visible;
    }

    input#leather2:checked ~ #l2 {
        visibility: visible;
    }

    input#leather1:not(:checked) ~ #l1 {
        visibility: hidden;
    }

    input#leather2:not(:checked) ~ #l2 {
        visibility: hidden;
    }
  .layer{
    display:none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
    <html>
    <head>

    <style type="text/css">


    
</style>

<meta charset="UTF-8">
<title>Interactivity</title>
</head>

<body>
      <div id="choices">

            <div>
                  Upholstery:<br/>
                  <input type="radio" name="u" id="upholstery1" value="Black">
                  <label for="upholstery1">1</label><br>
                  <input type="radio" name="u" id="upholstery2" value="blue">
                  <label for="upholstery2">2</label><br>
                  <input type="radio" name="u" id="upholstery3" value="green">
                  <label for="upholstery3">3</label><br>
            </div>

            <div>
                  Leather:<br/>
                  <input type="radio" name="l" id="leather1" value="black_leather">
                  <label>1</label><br>
                  <input type="radio" name="l" id="leather2" value="brown_leather">
                  <label>2</label><br>
            </div>

            <div>
                  Floor Cover:<br/>

                  <input type="radio" name="f" value="orange">
                  <label>1</label><br>
                  <input type="radio" name="f" value="yellow">
                  <label>2</label><br>
            </div>

            <div>
                  Countertop:<br/>

                  <input type="radio" name="c" value="pink">
                  <label>1</label><br>      
                  <input type="radio" name="c" value="teal">
                  <label>2</label><br>
            </div>
      </div>
      <div id="baseLayer" class="outerWrapper">
          <div class="column-half">
              <img id="c1" class="layer" src="http://www.fillmurray.com/100/200">
              <img id="c2" class="layer" src="http://www.fillmurray.com/150/200">
          </div>
          <div class="column-half">
              <img id="f1" class="layer" src="http://www.fillmurray.com/200/200">
              <img id="f2" class="layer" src="http://www.fillmurray.com/250/200">
          </div>
          <div class="column-half">
              <img id="l1" class="layer" src="http://www.fillmurray.com/300/200">
              <img id="l2" class="layer" src="http://www.fillmurray.com/350/200">
          </div>
          <div class="column-half">
              <img id="u1" class="layer" src="http://www.fillmurray.com/400/200">
              <img id="u2" class="layer" src="http://www.fillmurray.com/450/200">
              <img id="u3" class="layer" src="http://www.fillmurray.com/500/200">
          </div>
      </div>
</body>
</html>

关于html - 根据单选按钮选择显示、隐藏图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45641742/

24 4 0
文章推荐： java - 如何从我的操作 bean 调用 doPost()？
文章推荐： css - 自定义 ionic 图标 - ionicons
文章推荐： java - struts框架中的AppFuse密码管理
文章推荐： html - 根据其屏幕位置，将子
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com