我想要在html上显示某些类型图像的按钮

Question

我想创建一个投资组合，但我在显示图像的按钮上遇到麻烦..

我不知道它为什么没有底线，我想设置盒子的高度。

这是我的代码

＆＃13;

＆＃13;

    function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}

＆＃13;

.button{
  padding: 15px;
  padding-bottom: 40px;
  width: 40%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.button .show{display:block;}
.button .hide{display:none;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="button">
       
        <img id="all" src="Picture1.jpg" class="hide flex-item"/>
        <input type="button" onclick = "showImg()" value= "ALL">
  
        <img id="diseño" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg()" value= "DESIGN">
  
        <img id="web" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg()" value= "WEB">
   
        <img id="media" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg()" value= "MEDIA"> 
             
    </div> 
    

＆＃13;

＆＃13;

＆＃13;

Answer 1

在更改类名之前，您没有调用正确的ID。我建议如下！

function showImg(imageID) {
   if(document.getElementById(imageID).className !== "show"){
      document.getElementById(imageID).className = "show"
   } else {
      document.getElementById(imageID).className = "hide"
    }
}

并像这样打电话给他们

<img id="all" src="Picture1.jpg" class="hide flex-item"/>
<input type="button" onclick = "showImg('all')" value= "ALL">

除非你的输入是一种形式，否则我认为这是最佳做法。

<button type="button" onclick = "showImg('all')" value= "ALL">

结果如下：

function showImg(imageID) {
   if(document.getElementById(imageID).className !== "show"){
      document.getElementById(imageID).className = "show"
   } else {
      document.getElementById(imageID).className = "hide"
    }
}

.button{
  padding: 15px;
  padding-bottom: 40px;
  width: 40%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.button .show{display:block;}
.button .hide{display:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="button">
       
        <img id="all" src="Picture1.jpg" class="hide flex-item"/>
        <input type="button" onclick = "showImg('all')" value= "ALL">
  
        <img id="diseño" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg('diseño')" value= "DESIGN">
  
        <img id="web" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg('web')" value= "WEB">
   
        <img id="media" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg('media')" value= "MEDIA"> 
</div> 

Answer 2

试试这个。现在它完美无缺。但它使用了一些jquery。让我知道如果你没有使用它并且对jquery感觉不好，我会用javascript编写代码。

＆＃13;

＆＃13;

$(document).ready(function(){
  
  $('input:button').click(function(){
    if($('img').hasClass("show")){
     $('img').removeClass("show","hide").addClass("hide");
     }
   var  parentGet =$(this).attr("value");
    parentGet = "img#"+parentGet.toLowerCase(); $(parentGet).addClass("show").removeClass("hide");
  });
});

＆＃13;

.button{
  padding: 15px;
  padding-bottom: 40px;
  width: 40%;
  position:relative;
  margin: auto;
/*   display: flex; */
/*   flex-direction: row; */
  justify-content: center;
/*     display: -webkit-box; */
/*     display: -moz-box; */
/*     display: -ms-flexbox; */
/*     display: -webkit-flex; */
}
.button img{
  width:300px;
  position:absolute;
  top:50px;
}

.button .show{display:block;}
.button .hide{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
       
        <img id="all" src="https://i.ytimg.com/vi/vbm4-AyA86o/hqdefault.jpg" class="hide flex-item"/>
        <input type="button" value= "ALL">
  
        <img id="design" src="http://res.cloudinary.com/cargaze/image/upload/v1479932866/KTM-RC390-2016_ssv5c8.jpg" class="hide flex-item">
        <input type="button" value= "DESIGN">
  
        <img id="web" src="https://media.zigcdn.com/media/content/2016/Feb/bike-of-the-year-pulsar-rs200-m_720x540.jpg" class="hide flex-item">
        <input type="button" value= "WEB">
   
        <img id="media" src="https://media.zigcdn.com/media/content/2015/Dec/new-bike-2016-pic-image-photo-hero-hx250r-30122015-m1_720x540.jpg" class="hide flex-item">
        <input type="button" value= "MEDIA"> 
             
    </div>

＆＃13;

＆＃13;

＆＃13;