Javascript JQuery在单击时隐藏/显示多个div的内容

我试图同时显示/隐藏多个div。我正在使用

anchor

标记来实现这一点。我想同时更改两个单独div的内容。一个div保存iframe和其他视频描述。
到目前为止，我已经设法使我的一个div改变了它的内容，但另一个没有。当我点击

anchor

tag时，有没有办法使两个div的内容都改变

我的密码。HTML:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2 class='text-center'>Left Side</h2>
      <ul>
        <li><a class='myTag' href="#" rel="one">One</a></li>
        <li><a class='myTag' href="#" rel="two">Two</a></li>
        <li><a class='myTag' href="#" rel="three">Three</a></li>
      </ul>
    </div>
    <div class="col-md-6">
      <h2 class='text-center'>Right Side</h2>
      <div id='zero'>
        <img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
      </div>
      <div id='one' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
        </iframe>
      </div>
      <div id='two' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
        </iframe>
      </div>
      <div id='three' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
        </iframe>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>Lower container</h2>
      <div id='zero'>
        <p>This text needs to change. Video description</p>
      </div>
      <div id='one' style="display: none">
        <p>This is my video description</p>
      </div>
    </div>
  </div>
</div>

还有一个后续问题，我是否可以将此设置为可切换（我曾尝试在行尾添加toggle（），但这只会让一切变得更糟），因此当我再次单击

anchor

tag时，它会返回原始图像？
这是代码笔，您可以更好地理解我的问题：

将id更改为类。。。 而不是id=“one”put class=“one”，在jquery put中：

$（'.myTag'）。在（'click'，function（）上{
var target=$（this.attr（'rel'）；
$（“+”目标）。显示（'slow'）。同级（'div'）。隐藏（'slow'）；
});将id更改为类。。。
而不是id=“one”put class=“one”，在jquery put中：


$（'.myTag'）。在（'click'，function（）上{
var target=$（this.attr（'rel'）；
$（“+”目标）。显示（'slow'）。同级（'div'）。隐藏（'slow'）；
});问题的关键在于ID必须是唯一的。如果您有多个相同的ID，那么它将永远不会按预期工作。我把事情转到了课堂上，一切如你所料


$（'.myTag'）。在（'click'，function（）上{
var target=$（this.attr（'rel'）；
$（“+”目标）。显示（'slow'）。同级（'div'）。隐藏（'slow'）；
});

左侧





右侧
下容器
这个文本需要修改。视频描述

这是我的视频描述

两个

三个

问题的关键在于ID必须是唯一的。如果您有多个相同的ID，那么它将永远不会按预期工作。我把事情转到了课堂上，一切如你所料


$（'.myTag'）。在（'click'，function（）上{
var target=$（this.attr（'rel'）；
$（“+”目标）。显示（'slow'）。同级（'div'）。隐藏（'slow'）；
});

左侧





右侧
下容器
这个文本需要修改。视频描述

这是我的视频描述

两个

三个

不要为每个描述使用多个div，而是使用一个div并根据
rel
值更改内容。将描述存储在对象中，并使用
rel
value获取描述


//将您的描述存储在此处
//单击锚定标记，获取rel值并显示说明
//like desc[relvalue]
var desc={'one'：'no man no cry jimmy sax'，'two'：'be摆-别动'，'twree'：'Paul Van Dyk'；
$（'.myTag'）。在（'click'，function（）上{
var target=$（this.attr（'rel'）；
$（“#”+目标）。显示（'slow'）。同级（'div'）。隐藏（'slow'）；
$（'#desc p'）.html（desc[$（this.attr（'rel'）]））
});

左侧





右侧
下容器
这个文本需要修改。视频描述

不要为每个描述使用多个div，而是使用一个div并根据
rel
值更改内容。将描述存储在对象中，并使用
rel
value获取描述


//将您的描述存储在此处
//单击锚定标记，获取rel值并显示说明
//like desc[relvalue]
var desc={'one'：'no man no cry jimmy sax'，'two'：'be摆-别动'，'twree'：'Paul Van Dyk'；
$（'.myTag'）。在（'click'，function（）上{
var target=$（this.attr（'rel'）；
$（“#”+目标）。显示（'slow'）。同级（'div'）。隐藏（'slow'）；
$（'#desc p'）.html（desc[$（this.attr（'rel'）]））
});

左侧





右侧
下容器
这个文本需要修改。视频描述

您从哪里获得视频描述？您从哪里获得视频描述？有趣的方法。谢谢你的回答。你认为这比我原来的想法好吗，比如说更有效？@Zvezdas1989我很高兴能帮助你将描述中的
zero
改为
desc
有趣的方法。谢谢你的回答。你认为这比我原来的想法好吗，比如说更有效？@Zvezdas1989我很高兴能帮助你将描述中的
zero
改为
desc
，谢谢。浪费了这么多时间。想不到解决办法这么简单……谢谢。浪费了这么多时间。想不到解决方案就是这么简单。。。。。
$('.myTag').on('click', function(){
  var target = $(this).attr('rel');
  $("#"+target).show('slow').siblings("div").hide('slow');
});