Javascript 如果在同一个div上，则没有动画

我希望，例如，如果单击“公平贸易”按钮，并且内容加载，则如果用户单击相同的“公平贸易”按钮，则用户不应再次加载内容。长话短说，它不应该加载已经加载的内容

同时，现在内容很好地淡入，是否很难制作某种动画，例如，从左侧轻松地制作标题？如果你对如何实现这一点有想法，我将不胜感激

谢谢大家的帮助

var$imgs=$（“.section链接”）；
风险值数据=[{
标题：“公平贸易”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“无毒”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“质量”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“有机”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“素食主义者”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
];
//获取对输出区域的引用
var$outputDiv=$（“.section display”）；
var defaulttext=$outputDiv.find（“.text1”）.html（）
var defaultTitle=$outputDiv.find（“.title1”）.html（）；
$imgs.on（“单击”，函数（）{
$This=$（This）；
$imgs.removeClass（“单击”）；
$This.addClass（“单击”）；
$（“.title1”，$outputDiv）({
不透明度：0
}，函数（）{
$（“.title1”，$outputDiv）.html（数据[$This.index（）-1].title）
.制作动画({
不透明度：1
});
});
$（“.text1”，$outputDiv）({
不透明度：0
}，函数（）{
$（“.text1”，$outputDiv）.html（数据[$This.index（）-1].text）
.制作动画({
不透明度：1
});
})
});
$（文档）。在（“单击”）上，函数（e）{
if（$（e.target）.最近（'.section display'）.length！=1&$（e.target）.最近（.section link'）.length！=1）{
$（“.title1”，$outputDiv）({
不透明度：0
}，函数（）{
$（“.title1”，$outputDiv.html（默认标题）
.制作动画({
不透明度：1
});
});
$（“.text1”，$outputDiv）({
不透明度：0
}，函数（）{
$（“.text1”，$outputDiv.html（默认文本）
.制作动画({
不透明度：1
});
$（$imgs）.removeClass（'单击'）
})
}
})

。节链接{
宽度：100px；
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
-ms过渡：所有.5s易进易出；
-o型过渡：所有。5s易进易出；
过渡：全部。5s轻松进出；
}
.section-link.clicked{
颜色：红色；
}

公平贸易
无毒
品质
有机的
素食主义者
乱数假文
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”

如果您想了解更多信息，请点击符号。

要实现这一点，您可以使用

hasClass（）

来确定单击的元素是否已经具有

。单击的
类，如果已经单击，则不执行任何操作

还要注意的是，通过将公共逻辑提取到函数中，可以使代码干涸，如下所示：


var$imgs=$（“.section链接”）；
风险值数据=[{
标题：“公平贸易”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“无毒”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“质量”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“有机”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
{
标题：“素食主义者”，
正文：“知识本身是一种美德，是一位杰出的献身者，在劳动和财富方面具有临时性。但是，在最低限度上，我们不需要在公共消费方面进行任何实践。”
},
];
//获取对输出区域的引用
var$outputDiv=$（“.section display”）；
var defaultText=$outputDiv.find（“.text1”）.html（）；
var defaultTitle=$outputDiv.find（“.title1”）.html（）；
$imgs.on（“单击”，函数（）{
var$this=$（this）；
if（！$this.hasClass（'clicked'））{
$imgs.removeClass（'clicked'）；
setItem（$this.addClass（'clicked'）.index（））；
}
});
$（文档）。在（“单击”）上，函数（e）