Question

我最初在how to change a background color on tab click发布了一个问题，我得到了一个很好的答案。

但是，我想要做的是更改每个活动标签点击的父容器背景图像，这似乎需要不同的代码。以下是我想要实现的目标： Link to the example page

Answer 1

这不是实现它的最好方法，你可以找到不同的，当然更好的

$('ul>li:nth-child(1)').on('click', function() {
  $(".main").css('background-image', 'url(image-example1.png)');
})
$('ul>li:nth-child(2)').on('click', function() {
  $(".main").css('background-image', 'url(image-example2.png)');
})
$('ul>li:nth-child(3)').on('click', function() {
  $(".main").css('background-image', 'url(image-example3.png)');
})
$('ul>li:nth-child(4)').on('click', function() {
  $(".main").css('background-image', 'url(image-example4.png)');
})

body {
  font: 13px Verdana;
}

.main {
  padding: 100px 0;
}

ul {
  display: flex;
  padding: 0;
  list-style: none;
  justify-content: center;
}

ul li {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

<body>
<div class="main">
  <ul>
    <li>red</li>
    <li>blue</li>
    <li>cyan</li>
    <li>yellow</li>
  </ul>
</div>


</body>

在选项卡上更改父div的背景图像单击

1 个答案: