javascript - 如何使用JQuery显示相应的div并隐藏其他div？

Question

当单击每个项目 div 时，如何将 active 类添加到相应的信息 div 中。因此，单击“食物”，将显示食物的信息窗口。所有其他内容都被隐藏等。在我的项目中，我的 info div 不是 DOM 中的下一个内容，因为它嵌套在另一个位置。我看过 data-* 但不知道 data- 不知道如何使用它。

<div class="item">Food</div>
<div class="item">Music</div>
<div class="item">Transport</div>

<div class="info active">
    <h2>All about Food</h2>
    <p>Food is by far the best invention</p>
</div>

<div class="info">
    <h2>All about Music</h2>
    <p>Music is the best</p>
</div>

<div class="info">
    <h2>All about Transport</h2>
    <p>Cars, planes & trains</p>
</div>

我只有以下内容，可以为所有内容添加事件内容。

$(function() {
    $('.item').on('click', function() {
        $('.info').addClass('active');
    });
});

Answer 1

一种选择是向您的元素添加数据属性，并使用它们将您的项目绑定(bind)到相应的信息 div:

$('.item').click(function() {
  $('.info').removeClass('active');
  $('.info[data-info="' + $(this).data('item') + '"]').addClass('active');
})

.info.active {
  display: block;
}

.info {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-item="food" class="item">Food</div>
<div data-item="music" class="item">Music</div>
<div data-item="transport" class="item">Transport</div>

<div data-info="food" class="info active">
  <h2>All about Food</h2>
  <p>Food is by far the best invention</p>
</div>

<div data-info="music" class="info">
  <h2>All about Music</h2>
  <p>Music is the best</p>
</div>

<div data-info="transport" class="info">
  <h2>All about Transport</h2>
  <p>Cars, planes & trains</p>
</div>