jQuery将隐藏的div加载为内容部分答案

【问题标题】：jQuery to load hidden divs as content sectionsjQuery将隐藏的div加载为内容部分
【发布时间】：2013-06-05 00:45:41
【问题描述】：

我有一个 jQuery 驱动的侧边导航菜单，点击 li 会加载隐藏的 div。当我单击另一个 li 时，我每隔一个隐藏的 div id 就有一个 hide() 函数。理想情况下，我正在寻找一种方法，当我单击 li 时，它会显示隐藏的 div 并隐藏以前存在的 div。我必须根据 id 加载每个隐藏的 div，但我认为在加载新 div 之前有一些方法可以隐藏当前内容。这是我目前拥有的方式：

         <ul>
            <li id="overview" class="selector"><a href="#">OVERVIEW</a></li>
            <li id="whyus" class="selector"><a href="#">WHY US</a></li>
            <li id="clients" class="selector"><a href="#">CLIENTS & TESTIMONIALS</a>   </li>
            <li id="staff" class="selector"><a href="#">MEET THE STAFF</a></li>
        </ul>

jQuery(document).ready(function() {

jQuery("#overviewHidden").fadeIn();
    jQuery("li#overview").addClass('active');



jQuery("li.selector").click(function () {
  jQuery(this).addClass('active');
  jQuery(this).siblings().removeClass('active');
});



    jQuery("#overview").click(function(){
        jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide();
                    jQuery('#overviewHidden').slideDown();
    });

    jQuery("#whyus").click(function(){
        jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide();
                    jQuery('#whyusHidden').slideDown();
    });

    jQuery("#clients").click(function(){
        jQuery('#overviewHidden, #whyusHidden, #staffHidden').hide();
                    jQuery('#clientsHidden').slideDown();   
    });

    jQuery("#staff").click(function(){
        jQuery('#clientsHidden, #overviewHidden, #whyusHidden').hide();
                    jQuery('#staffHidden').slideDown();
    });

});

我想隐藏当前 div 的所有内容，而不是所有 div 上的 hide()。谢谢，

【问题讨论】：

你能分享隐藏div的html吗

标签： javascript jquery navigation onclick show-hide

【解决方案1】：

一种解决方案是向所有隐藏的 div 添加一个类，例如 hidden-container，然后在您的点击处理程序中使用它来隐藏元素，而不是使用硬编码的 id。

前

jQuery("#whyus").click(function(){
    var hidden = jQuery('#whyusHidden');
    jQuery('.hidden-container').not(hidden).hide();
    hidden.slideDown();
});

您还可以通过删除单个点击处理程序来改进解决方案

为此，您需要为每个 div 添加一个名为 hidden-container 的类

jQuery("li.selector").click(function () {
    var $this = jQuery(this);
    $this.addClass('active');
    $this.siblings().removeClass('active');

    var hidden = jQuery('#' + this.id + 'Hidden');
    jQuery('.hidden-container').not(hidden).hide();
    hidden.slideDown();
});

因为我可以看到隐藏id的id只不过是被点击的li的id+Hidden

演示：Fiddle

【讨论】：

【解决方案2】：

您可以在单击链接时简单地打开或关闭活动类名称，同时隐藏活动 div。这是一个工作示例http://codepen.io/lukeocom/pen/eFdjI

您还可以通过向ul 添加一个类而不是每个li 来改进您的代码。然后在每个 li 上使用单独的类名来选择隐藏的 div。您不需要使用<a> 标签，因为您可以很容易地为<li> 标签分配点击功能。

$('.selector li').click(function(){
  //hide current displayed div
  $('.active').toggleClass('active').hide();

  //get the class name of this item to select the hidden div.
  var theId = '#' + $(this).attr('class');
  //show the div, assign active class
    $(theId).toggleClass('active').fadeIn(500);
});

希望对你有帮助

【讨论】：