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

Question

一般来说，我对jquery和编码都是个新手。我在这方面有点麻烦。

我想要的是当页面加载时，‘shown’链接是活动的，并显示'Details 1‘。然后当你点击‘电影制作’或'Beme'...“细节2或3会显示出来，无论哪一个都会消失。”

到目前为止，我已经把所有东西都设置好了，只需要让它到达当你点击其他链接时，正确的“详细信息”文本会自动显示出来的位置。

太感谢你了，我现在手忙脚乱！

http://jsfiddle.net/t1huc43d/

下面是需要调优的代码：

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

Answer 1

这段代码将为你节省了大量的时间。我添加了一个名为"data“的自定义属性。此属性用于将链接绑定到要显示的选项卡。这段代码将使添加附加标签等变得容易得多。查看底部更改的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>

Answer 2

$(function() {
   $("#togglediv1").click(function() {
      $("#one").removeClass("display");
      $("#one").addClass("display-start");
      $("#two").removeClass("display-start");
      $("#two").addClass("display");
      $("#three").removeClass("display-start");
      $("#three").addClass("display");
   });
});

$(function() {
   $("#togglediv2").click(function() {
      $("#one").removeClass("display-start");
      $("#one").addClass("display");
      $("#two").removeClass("display");
      $("#two").addClass("display-start");
      $("#three").addClass("display");
      $("#three").removeClass("display-start");
   });
});

..。

Answer 3

更新的jsfiddle：http://jsfiddle.net/t1huc43d/3/

由于您的in不能很好地跟踪点击的内容和未点击的内容，因此我决定只使用this来查找与详细信息对应的点击内容。

更新后的javascript：

$(function() {
   $("li").click(function() {
      $("#togglediv1").removeClass("active-start");
      $("li").removeClass("active");
      $(this).addClass("active");
      let temp = $("#divtoggle").children();
            var index;

      for (let i = 0; i < temp.length; i++)
      {
        if (this == temp[i] )
        {
            index = i;
          break;
        }
      }

      $(".display-start").addClass("display");
      $(".display-start").removeClass("display-start");

          let text_children = $(".text").children()
      let the_child = text_children[index];
            $(text_children[index]).addClass("display-start");
      $(text_children[index]).removeClass("display");
   });
});