Question

我不知道要放置什么而不是href，这是因为它们无法嵌入图像。如果您可以在这里提供帮助，那将非常好。您可能知道我最近发布了一个类似的问题，但是它不是很清楚，答案也无济于事，但还是要感谢。这是代码：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  display: inline-block;
  margin-left; 15px;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align:center;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Select Skin</button>
  <div class="dropdown-content">
    <a href="#">Mumbo</a>
    <a href="#">Grian</a>
    <a href="#">Iskall</a> 
</div>
</div>

</body>

Answer 1

我了解到您是在单击下拉列表中的选项时嵌入图像

我建议的方法是为选项设置类型为data-src的属性，然后使用jquery获取该值并将其附加到单击时的div上

$(document).ready(function(){
  $(".dropdown-content a").click(function(){
     $(".embeded-images").append("<img src='" + $(this).data("img") + "' />");
  });
});

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  display: inline-block;
  margin-left; 15px;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align:center;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <button class="dropbtn">Select Skin</button>
  <div class="dropdown-content">
    <a href="#" data-img="https://img.freepik.com/free-vector/glass-transparent-christmas-ball-with-snow_118124-1557.jpg?size=338&ext=jpg">Mumbo</a>
    <a href="#" data-img="https://img.freepik.com/free-photo/coffee-topped-with-whipped-cream-coffee-seeds_140725-1121.jpg?size=338&ext=jpg">Grian</a>
    <a href="#" data-img="https://img.freepik.com/free-vector/fireworks-new-year-2020-background_52683-29350.jpg?size=664&ext=jpg">Iskall</a> 
  </div>
</div>

<div class="embeded-images"></div>

如何从下拉菜单中获取选项（每个可能的选择）以嵌入图像<html>

1 个答案: