Javascript 如何使用Jquery实现动态转换效果？

当你点击侧边栏的左侧时，我试图使过渡效果

例如，如果您单击

Ottogi

（拉面的名称），它应该更改背景图像，如果您想了解

Sajo hapyo

（拉面的名称），它也应该更改背景图像。基本上适用于侧边栏中的所有图像（

例如natura

，

maloo

，

dongush

，

may

）

我的改变背景图像的程序可以工作，但是只要用户想单击back ottogi，它就会停止。所以，我猜我应该使用条件语句或循环，因为它基本上做相同的事情。 请帮帮我，我挣扎得很厉害

这是我正在工作的网站

HTML

<section id="main-showcase">
<div class="showcase-wrapper">
    <div class="left-main col-lg-3 col-md-3">
        <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
        <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
        <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
        <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
        <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
        <div class="shadow-effect"><p class="may">ООО Май</p></div>
    </div>
    <div class="right-main col-lg-9 col-md-9">
        <div class="inner-container">
            <h1>Ottogi</h1>
            <h2>Южно - Корейские продукты питания высочайшего качества!</h2>
        </div>
        <div class="box-container">
            <div class="main-wrap">
                <div id="main-slider" class="first-slider">
                    [[getImageList?
                        &tvname=`goods`
                        &tpl=`goodsSlider.tpl`
                    ]]
                </div>
            </div>
        </div>
    </div>
</div>

JS

.ottogi-bg {
    background: url('/assets/template/images/main_03.jpg') no-repeat center;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.sajo-bg {
    background: url('../images/about-us-company-bg.jpg');
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

 $('p.ottogi').click(function(){
    $('.right-main').addClass('ottogi-bg');
});
$('p.sajo').click(function(){
    $('.right-main').addClass('sajo-bg');
});

---

我认为问题在于JavaScript代码

如果用户单击ottogi，则单击sajo

.右主分区添加了ottogi bg类

.右侧主分区添加了sajo bg类

单击两次后，.right main有两个类。也许客户方感到困惑

这个解决方案是这样的

设置以下代码

$('.right-main').removeClass('sajo-bj');

之后

---

原因是您一直在将该类添加到

.right main

类。这意味着您将得到：

.right main.ottogi bg.sajo bg

。因为sajo bg是您在CSS中定义的最后一个类，所以它将始终覆盖ottori bg类

你可以试试这个：

$（'.ottogi'）。单击（函数（）{
$（'.right main'）.removeClass（）.addClass（“right main ottogi bg”）；
});
$（'.sajo'）。单击（函数（）{
$（'.right main'）.removeClass（）.addClass（“right main sajo bg”）；
});
。右主{
背景颜色：灰色；
填充：20px；
}
奥托吉博士{
背景颜色：蓝色；
}
萨乔先生{
背景色：红色；
}





试验

$('.right-main').addClass('ottogi-bg');