如何在一些不同的元素中切换一个类?
在html中,我在.fig-8
锚点中有2个图像。如何在一些不同的元素中切换一个类?
.img-active
= display: block
.img-inactive
= display: none
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>
所有我需要的是,当你点击锚,.img-active
应display: none
和.img-inactive
= display: block
我这样做的js文件:
$('.tabs1 a').on('click', function() {
$(this).find('.img-active').hide();
$(this).find('.img-inactive').show();
});
它做我想要什么,但如果你点击第二个或第三个锚,在那里我点击图片没有得到到原来的形状(默认图片。)。
有什么建议吗?
使用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>
你可以试试这个: -
$('.tabs1 a').on('click', function() {
$('.img-active').not(this).show();
$('.img-inactive').not(this).hide();
$(this).find('.img-active').hide();
$(this).find('.img-inactive').show();
});
你能解释一下为什么那里有'.not'吗? – TheUnnamed
所以,如果我正确理解你的问题,你想把所有以前的图像恢复到原来的样子,并且当前点击的图像不同。所以我将除此之外的所有其他图像(这是当前点击的图像)带到那里状态和$(this)以您想要的方式显示:显示:none .img-active和display:block for .img-inactive – VivekN
你是什么意思的原始形状? – VivekN
@VivekN之前的图像。默认的一个。 – TheUnnamed
Bah,不记得jQuery。基本上,你想找到每个人,隐藏他们,然后找到点击的目标,并显示一个。 – Will