代码之家  ›  专栏  ›  技术社区  ›  lampShadesDrifter

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

  •  1
  • lampShadesDrifter  · 技术社区  · 7 年前

    我有一套菜单元素 <a> 还有一套 div 元素(每个元素都包含一个django模板。当前具有在 菜单 元素,具体取决于单击的是哪个(突出显示单击的菜单项)。希望它在任何时候都只显示与“active”菜单项对应的django模板。现有代码如下所示(它当前仅更改哪个菜单项具有“active”类):

    <!-- top menu color activation -->
        <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>
    
        <!-- top menu (note, using semantic UI) -->
        <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>
    
        <!-- including corresponding django templates (currently all visible) -->
        <!-- would like only item-1.html to be visible when menu item 1 is active and similarly for the other templates here -->
        <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 对于前端网页的东西,并会感谢任何在代码的措辞不明显的解释。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Louys Patrice Bessette    7 年前

    我用一种更简洁易读的方式写了你的代码。

    $(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>