Question

在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();
});

它正在做我想要的但是如果你点击第二个或第三个锚，我点击的图像没有达到其原始形状（默认图像）。

有什么建议吗？

Answer 1

无法使用CSS实现这一目标吗？您可以使用:focus伪类。

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

否则，使用jQuery也很容易。

＆＃13;

$('.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();
});

＆＃13;

.img-inactive,.img-active {float:left;}
.img-inactive {display:none;}
.img-active {display:block;}

＆＃13;

<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>

＆＃13;

Answer 2

你可以试试这个： -

$('.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();
});

如何在一些不同的元素之间切换一个类？

2 个答案: