根据Jquery中的选择删除div

Question

我有这个导航

<div class="col-3" id="record_nav">
  <ul>
    <li class="course-record selected" data-target="#upcoming"><span class="dot yellow"></span>Upcoming Week</li>
    <li class="course-record" data-target="#future"><span class="dot blue"></span>Further Weeks</li>
    <li class="course-record" data-target="#history"><span class="dot red"></span>History</li>
  </ul>
</div>

在我的 li 标签内，我有一个 data-target 选择一个具有这些特定 id 的 div。第一个是 display:block 其余的是 display: none;

#future{
  display: none;
}

#history{
  display: none;
}

#upcoming{
  display: block;
}

.selected{
  -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);

}

在我的 jquery 中，我让 li 元素根据选择的类添加和删除选定的类。这工作正常。但是当我尝试显示和隐藏数据目标时，最终被删除的是选择的 li 元素本身。我不确定我做错了什么。

  $('#record_nav ul li').on('click', function(e){
      $('#record_nav ul li.selected').removeClass('selected');
      $(this).addClass('selected');
      var $this=$(e.target);
      console.log(e.target);
      $(this).not($this.data('target')).hide();
      $(this).filter($this.data('target')).show(300);
  });

$('#record_nav ul li').on('click', function(e) {
  $('#record_nav ul li.selected').removeClass('selected');
  $(this).addClass('selected');
  var $this = $(e.target);
  console.log(e.target);
  $(this).not($this.data('target')).hide();
  $(this).filter($this.data('target')).show(300);
});

#future {
  display: none;
}

#history {
  display: none;
}

#upcoming {
  display: block;
}

.selected {
  -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-3" id="record_nav">
  <ul>
    <li class="course-record selected" data-target="#upcoming"><span class="dot yellow"></span>Upcoming Week</li>
    <li class="course-record" data-target="#future"><span class="dot blue"></span>Further Weeks</li>
    <li class="course-record" data-target="#history"><span class="dot red"></span>History</li>
  </ul>
</div>

我试图隐藏和显示的 div 是这样的

<div id="upcoming">some content</div>
<div id="future">some content</div>
<div id="history">some content</div>

Answer 1

您可以在您想要隐藏和显示的div 中关联一个名为content 的类，以便我们可以使用该类选择器隐藏那些div。现在，您可以使用.data() 获取data-target 值并显示它：

$('#record_nav ul li').on('click', function(e){
      $('#record_nav ul li.selected').removeClass('selected');
      $(this).addClass('selected');
      $('.content').hide();
      var id = $(this).data('target');
      $(id).show();
  });

#future{
  display: none;
}

#history{
  display: none;
}

#upcoming{
  display: block;
}

.selected{
  -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-3" id="record_nav">
  <ul>
    <li class="course-record selected" data-target="#upcoming"><span class="dot yellow"></span>Upcoming Week</li>
    <li class="course-record" data-target="#future"><span class="dot blue"></span>Further Weeks</li>
    <li class="course-record" data-target="#history"><span class="dot red"></span>History</li>
  </ul>
</div>

<div id="upcoming" class='content'>some content upcoming</div>
<div id="future" class='content'>some content future</div>
<div id="history" class='content'>some content history</div>