Question

单击链接时，我想为活动链接添加背景图像。这是我的代码但不起作用..

HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="width:7%;" align="center">
      <a href="Home.aspx"  id="DashboarHome">Home</a>
    </td>
    <td style="width:9%;" align="center">
      <a href="Request.aspx"  id="Dashboard">Requests</a>
    </td>
    <td style="width:66%;" align="center">&nbsp;
    </td>
  </tr>
</table>

Answer 1

您可以查看我为您准备的这个小提琴......但是我建议当链接更改而不是活动链接时，容器的背景图像会发生变化。 https://jsfiddle.net/samcyn/hyqqo84a/

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="width:7%;" align="center">
      <a href="#" class="content_menu" id="DashboardH" data-image="https://i.ytimg.com/vi/H8Y9KX8GYAk/hqdefault.jpg">Home</a>
    </td>
    <td style="width:9%;" align="center">
      <a href="#" class="content_menu" id="DashboardREQ" data-image="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">Requests</a>
    </td>
    <td style="width:66%;" align="center">&nbsp;
    </td>
  </tr>
</table>

<div id="check">
</div>

const links = document.querySelectorAll('a');
const check = document.getElementById('check');
function clickHandler(){
    //alert(this.dataset.image);
  //here's what you wanted
 // this.style.backgroundImage = `url(${this.dataset.image})`;
 //my suggestion
 check.style.backgroundImage = `url(${this.dataset.image})`;

}
links.forEach(function(link){
  link

.addEventListener（＆＃39;点击＆＃39;，clickHandler）; }）;

在onclick事件中如何添加背景图像？

1 个答案: