javascript - 单击 atag 时显示特定 div。并隐藏其他div

Question

我对 jquery 和编码不太陌生。我在这方面遇到了一些麻烦。

我想要的是当页面加载时，“Vlogging”链接处于事件状态并显示“Details 1”。然后，当您单击“电影制作”或“成为我”时...“详细信息 2 或 3 将会显示，并且其中的任何一个都会消失。

到目前为止，我已将所有内容设置正确，只需将其设置为当您单击其他链接之一时，正确的“详细信息”文本会自动显示的位置。

非常感谢你，我现在正在处理它!

http://jsfiddle.net/t1huc43d/

这是需要调整的代码:

$(function() {
   $("togglediv1").click(function() {
      $("#togglediv1").removeClass("display-start");
      $("li").removeClass("display");
      $(this).addClass("display");
   });
});

Answer 1

此代码将为您节省大量时间。我添加了一个名为“data”的自定义属性。此属性用于将链接绑定(bind)到您要显示的选项卡。此代码将使添加其他选项卡等变得更加容易。请查看底部更改后的 HTML 和 JavaScript。

<div id="wrap">

<ul id="divtoggle">
    <li><a class="link" data="1">Vlogging</a></li>
    <li><a class="link" data="2"> Filmmaking</a></li>
    <li><a class="link" data="3"> Beme</a></li>
</ul>


<div class="text">
    <div class="tab" data="1">Details 1</div>
    <div class="tab" data="2">Details 2</div>
    <div class="tab" data="3">Details 3</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
  $(".link").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    dataAttr = $(this).attr("data");
    $(".tab").hide();
    $(".tab[data="+dataAttr+"]").show();
  });
  $(".link:first").click();
});
</script>