相同的选择器单击添加和删除

Question

我喜欢一次一个地在同一个地方获取不同的内容。因此，当用户单击 "Select me 1" 时，它会打开 Lorem ipsum 1，如果他单击 "Select me 3"，代码将从 Content1Box 中删除显示块。

这是我的 DOM 和 JSFIDDLE

<div id="contentContainer">
<div class="box" id="content1box">
    <p>Lorem ipsum 1</p>
</div>
<div class="box" id="content2box">
    <p>Lorem ipsum 2</p>
</div>
<div class="box" id="content3box">
    <p>Lorem ipsum 3</p>
</div>
</div>

<div id="contentSelection">
<div class="contentSelect" id="content1">
    <p>Select me 1</p>
</div>
<div class="contentSelect" id="content2">
    <p>Select me 2</p>
</div>
<div class="contentSelect" id="content3">
    <p>Select me 3</p>
</div>
</div>

$('#contentSelection .contentSelect').on('click',function(){
TweenMax.to(("#"+ $(this).attr('id') + "box"), 0.5, {display: "block", delay:0.5}); });

我正在使用 TweenMax 制作这个动画。

Answer 1

为什么不在动画之前隐藏所有 .box 元素：

Updated Example

$('#contentSelection .contentSelect').on('click', function () {
    $('#contentContainer .box').hide();
    TweenMax.to(("#" + $(this).attr('id') + "box"), 0.5, { display: "block", delay: 0.5 });
});

相同的选择器单击添加和删除

Same selectors click add and remove

javascript

jquery

html

css

gsap