女靴,雪地靴,冬裙,呢大衣,毛衣,棉服,女裤,羽绒服,牛仔裤切依次向下排列,用jQuery实现单击出现相应的图片,其他图片不显示
时间: 2024-03-14 17:46:36 浏览: 102
好的,可以使用以下代码实现:
HTML代码:
```html
<ul>
<li>女靴</li>
<li>雪地靴</li>
<li>冬裙</li>
<li>呢大衣</li>
<li>毛衣</li>
<li>棉服</li>
<li>女裤</li>
<li>羽绒服</li>
<li>牛仔裤</li>
</ul>
<div class="img-container">
<img src="img/女靴.jpg">
<img src="img/雪地靴.jpg">
<img src="img/冬裙.jpg">
<img src="img/呢大衣.jpg">
<img src="img/毛衣.jpg">
<img src="img/棉服.jpg">
<img src="img/女裤.jpg">
<img src="img/羽绒服.jpg">
<img src="img/牛仔裤.jpg">
</div>
```
CSS代码:
```css
.img-container {
display: none;
}
.img-container img {
max-width: 100%;
height: auto;
}
```
jQuery代码:
```javascript
$('li').click(function() {
$('.img-container').hide();
var index = $(this).index();
$('.img-container img').eq(index).show();
});
```
这段代码会隐藏所有图片,然后根据点击的 li 元素的索引值,显示相应的图片。
阅读全文