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标签里面，我有一个数据目标选择一个具有那些特定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

您可以将名为content的类与要隐藏和显示的div相关联，以便我们可以使用此类选择器隐藏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>

根据Jquery中的选择删除div

1 个答案: