Question

我对jquery和编码很新。我遇到了一些麻烦。

我想要的是当页面加载时，“Vlogging”链接处于活动状态，并显示“Details 1”。然后，当你点击'电影制作'或'Beme'时...'详细信息显示2或3，哪一个在那里消失。

到目前为止，我已经设置好所有内容，只需要点击其他链接之一，正确的“详细信息”文字就会显示出来。

非常感谢你，我现在把它放在一个小提琴里！

以下是需要调整的代码：

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

Answer 1

此代码将为您节省大量时间。我添加了一个名为＆＃34; data＆＃34;的自定义属性。此属性用于将链接绑定到要显示的选项卡。此代码将使添加其他选项卡等变得更加容易。查看底部是否有更改的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/

由于您的ID不足以跟踪点击内容和不点击内容，因此我决定使用@latest查找您在详细信息中对应的内容。

您更新的javascript：

this

Answer 4

JQuery实际上有一些组件可以帮助你，但对我来说，最简洁和最干净的方法是：

我要做的第一件事就是设置每个标题的id，然后将它们递增1.然后，我会对这样的细节做同样的事情：

<div id="wrap">
    <ul id="divtoggle">
        <li><a class="title" id="title-1">Vlogging</a></li>
        <li><a class="title" id="title-2"> Filmmaking</a></li>
        <li><a class="title" id="title-3"> Beme</a></li>
    </ul>

    <div class="text">
        <div class='display' id="detail-1">Details 1</div>
        <div class='display' id="detail-2">Details 2</div>
        <div class='display' id="detail-3">Details 3</div>
    </div>
</div>

之后，JQuery非常简单。在课程title上设置点击事件。首先要做的是解析所点击标题的id。完成后，定位相关详细信息并显示它：

$(document).ready(function() {

   $(".title").click(function() {

     //*** get id
     var id = $(this).attr("id").split("-")[1];
     if (typeof id != "undefined"){

       //*** hide other descriptions and show yours
       $(".display").hide();
       $("#detail-" + id).show();
     }

   });

});

DEMO：http://jsbin.com/volikofihe/edit?html,js,console,output

Answer 5

你走了。简化你的CSS一点点。在顶部链接上切换.active类，在文本div上切换.display类。单击链接时，代码将使用列表中该链接的$.index()作为要显示的文本div的索引。因此，如果您单击第二个链接，它将显示第二个文本框。

$(function() {
   $toggleLinks = $('#divtoggle a'),
   $displays = $('.text div');
   
   $toggleLinks.on('click', function(e) {
     e.preventDefault();
     $toggleLinks.removeClass('active');
     $(this).addClass('active');
     $displays.removeClass('display');
     $displays.eq($(this).closest('li').index()).addClass('display');
   });
});

li {
  color: grey;
  font: effra;
  font-weight: bold;
}

a:hover {
  color: #aaaaaa;
  cursor: pointer;
}

.active {
  color: orange;
}

.text div {
  display: none;
}

.text .display {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">

  <ul id="divtoggle">
    <li><a class="active">Vlogging</a></li>
    <li><a>Filmmaking</a></li>
    <li><a>Beme</a></li>
  </ul>

  <div class="text">
    <div class='display'>Details 1</div>
    <div>Details 2</div>
    <div>Details 3</div>
  </div>

</div>

Answer 6

保留尽可能多的现有代码。 Updated fiddle.

我为每个li元素添加了一个数据控件自定义属性，以便将它们与每个相应的数据div相关联：

<li data-controls="one"><a id="togglediv1" class="active-start">Vlogging</a></li>
<li data-controls="two"><a id="togglediv2"> Filmmaking</a></li>
<li data-controls="three"><a id="togglediv3"> Beme</a></li>

然后我根据需要更新了JavaScript以删除和添加类。

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

6 个答案: