在 html 中,我在 .fig-8
anchor 内有 2 个图像。
.img-active
= 显示: block
.img-inactive
= 显示:无
HTML:
<div class="tabs1">
<a class="fig-8" data-tab="tab1">
<img src="/path.png" class="img-active">
<img src="/selected.png" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab2">
<img src="/path1.png" class="img-active">
<img src="/selected.png" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab3">
<img src="/path2.png" class="img-active">
<img src="/selected.png" class="img-inactive">
</a>
</div>
我需要的是,当您单击 anchor 时,.img-active
应该是 display: none
和 .img-inactive
= 显示: block
正如我在 js 文件中所做的那样:
$('.tabs1 a').on('click', function() {
$(this).find('.img-active').hide();
$(this).find('.img-inactive').show();
});
它正在执行我想要的操作,但是如果您单击第二个或第三个 anchor ,我单击的图像不会达到其原始形状(默认图像。)。
有什么建议吗?
最佳答案
这不能用 CSS 来实现吗?您可以使用 :focus
伪类。
.img-inactive,.img-active {float:left;}
.img-inactive {display:none;}
.img-active {display:block;}
a:focus .img-inactive {display:block;}
a:focus .img-active {display:none;}
<div class="tabs1">
<a class="fig-8" data-tab="tab1" href="#">
<img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
<img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab2" href="#">
<img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
<img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab3" href="#">
<img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
<img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
</a>
</div>
否则,使用 jQuery 也很容易实现
$('.tabs1 a').on('click', function() {
$('.tabs1 a .img-inactive').hide();
$('.tabs1 a .img-active').show();
$(this).find('.img-inactive').show();
$(this).find('.img-active').hide();
});
.img-inactive,.img-active {float:left;}
.img-inactive {display:none;}
.img-active {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs1">
<a class="fig-8" data-tab="tab1" href="#">
<img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
<img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab2" href="#">
<img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
<img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab3" href="#">
<img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
<img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
</a>
</div>
关于javascript - 如何在一些不同元素之间切换类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44552831/