Question

我有一组菜单元素<a>和一组div元素（每个元素都包含一个django模板。目前有逻辑可以在菜单之间切换一个“活动”类/ em>取决于单击的元素（突出显示单击的菜单项）。想要它，以便只有对应于“活动”菜单项的django模板随时可见。现有代码看起来像这样（它目前只更改哪个菜单项具有“活动”类：

<script> menu = {}; // ready event menu.ready = function() { // selector cache var $menuItem = $('.menu a.item, .menu .item, .menu .link.item'), // alias handler = { activate: function() { $(this) .addClass('active') .closest('.ui.menu') .find('.item') .not($(this)) .removeClass('active'); } } ; $menuItem .on('click', handler.activate) ; }; // attach ready event $(document).ready(menu.ready); </script>  <div class="ui container"> <div class="ui large secondary red pointing menu"> <a class="toc item"> <i class="sidebar icon"></i> </a> <a class="active item">item-1</a> <a class="item">item-2</a> <a class="item">item-3</a> <div class="right menu item"> <div class="ui simple dropdown"> More <i class="dropdown icon"></i> <div class="ui menu"> <a class="item"><i class="globe icon"></i> Choose Language</a> <a class="item"><i class="settings icon"></i> Log Out</a> </div> </div> </div> </div> </div>   <div>{% include "testapp/item-1.html" %}</div> <div>{% include "testapp/item-2.html" %}</div> <div>{% include "testapp/item-3.html" %}</div>

我无法弄清楚的是如何隐藏在当前活动菜单项对应的任何给定时间当前可见的django模板（例如，用户点击item-1菜单项，然后只有item-1 .html django模板应该是可见的）。

如何使用jQuery获得这些功能？ JS对于前端网页内容非常新，并且会对代码措辞中不明显的任何内容进行更深入的解释。

Answer 1

我用更简短，更易读的方式编写了代码。

$(document).ready(function(){
  var item = $('.menu .item');
  item.on("click",function(){
    item.removeClass("active");
    $(this).addClass("active");
  });
});

上面的代码与您的代码完全相同。

<小时/> 的修改
现在，要根据该菜单点击显示特定的div，您应该在“模板”和数据属性中添加一个类，使用.data()

可读取

$(document).ready(function(){

  // Click handler.
  var item = $('.menu .item');
  item.on("click",function(){

    // Add the active class.
    item.removeClass("active");
    $(this).addClass("active");

    // Show the right Django template.
    var id = $(this).data("id");
    if(id!="" && typeof(id)!="undefined"){
      $(".template").hide();
      $(".template[data-id='"+id+"']").show();
    }
  }); // End click.

  // On load, only show the first template
  $(".template").hide();
  $(".template[data-id='1']").show();

}); // end ready.

.active{
  color:red;
}
.template{
  width:20em;;
  height: 8em;
  border: 1px solid black;
  box-shadow:inset 0 0 3em #fff;
  margin:1em;
}
.template:nth-child(3){
  background-color:#6AA;
}
.template:nth-child(4){
  background-color:#A6A;
}
.template:nth-child(5){
  background-color:#AA4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui container">
  <div class="ui large secondary red pointing menu">
    <a class="toc item">
      <i class="sidebar icon"></i>
    </a>
    <a class="active item" data-id="1">item-1</a>
    <a class="item" data-id="2">item-2</a>
    <a class="item" data-id="3">item-3</a>

    <div class="right menu item">
      <div class="ui simple dropdown">
        More
        <i class="dropdown icon"></i>
        <div class="ui menu">
          <a class="item"><i class="globe icon"></i> Choose Language</a>
          <a class="item"><i class="settings icon"></i> Log Out</a>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="template" data-id="1">item-1.html</div>
<div class="template" data-id="2">item-2.html</div>
<div class="template" data-id="3">item-3.html</div>

根据另一组元素的类别不断隐藏不同的元素

1 个答案: