Question

我在搜索解决方案时遇到了这个JSFiddle。它几乎完成了我需要的工作，除了我需要从隐藏div开始。我试过玩它但是对JS来说是新手我没有太多运气。

我以为我会把这个作为一个起点，看看是否有人可以就我需要采取的路线提出建议？

任何帮助将不胜感激。

$(document).ready(function () {
    $('.pbox:gt(0)').hide();
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        var $this = $(this);
        // fade out all open subcontents
        $('.pbox:visible').fadeOut('slow', function () {
            $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
        });
    });
});

ul#menu {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    position:relative;
    float:left;
    border-bottom:4px solid #efefef;
    margin-right: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    display: inline-block;
}
ul#menu .current {
    border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
    border-bottom:4px solid #3d496a;
}
ul#menu li a {
    padding:2px 2px;
    text-decoration:none;
    font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}
ul#menu li a:hover {
    color:#8895b8;
    border:none;
}
#div1 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#" data-id="div1">Description</a>
  </li>
  <li><a href="#" data-id="div2">Shipping and payment</a>
  </li>
  <li><a href="#" data-id="div3">Returns</a>
  </li>
  <li><a href="#" data-id="div4">Feedback</a>
  </li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

Answer 1

只需将css中的display: none;添加到您要隐藏的元素中即可。

从第一个class="active"移除li，以便不选择它。

稍微修改js。看到你的函数只显示一个div，如果以前它隐藏了。如果你从所有隐藏开始，它将不会隐藏任何东西，因此它不会显示任何东西。

$(document).ready(function() {
  $('.pbox:gt(0)').hide();
  $('#menu').on('click', 'a', function() {
    $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    var $this = $(this);
    // fade out all open subcontents
    var visibleElements = $('.pbox:visible');
    if (visibleElements.length <= 0) {
        $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
    } else {
      visibleElements.fadeOut('slow', function() {
        $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
      });
    }
  });
});

ul#menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

ul#menu li {
  position: relative;
  float: left;
  border-bottom: 4px solid #efefef;
  margin-right: 10px;
  padding-right: 0px;
  padding-bottom: 5px;
  display: inline-block;
}

ul#menu .current {
  border-bottom: 4px solid #3d496a;
}

ul#menu li:hover {
  border-bottom: 4px solid #3d496a;
}

ul#menu li a {
  padding: 2px 2px;
  text-decoration: none;
  font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
  color: #68759c;
}

ul#menu li a:hover {
  color: #8895b8;
  border: none;
}

.pbox {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#" data-id="div1">Description</a>
  </li>
  <li><a href="#" data-id="div2">Shipping and payment</a>
  </li>
  <li><a href="#" data-id="div3">Returns</a>
  </li>
  <li><a href="#" data-id="div4">Feedback</a>
  </li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

修改

如果您想隐藏所有其他地方的div，请点击此处：

实际上非常简单。

我们将click事件绑定到文档并检查点击的内容。

如果它是包含内容的div（#div1，#div2等），或者如果它是菜单元素，我们不想隐藏div，否则我们会这样做。

$(document).on('click', function(e) { if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) { $('.pbox').fadeOut('slow'); $("#menu .current").removeClass("current"); } });

e.target返回一个单击的元素（在本例中）。如果它有类pbox，则表示这是带内容的div。

第二个条件是菜单元素。如果.closest()功能

描述：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

返回一个id="menu"的元素，这意味着我们点击了菜单中的一个元素。

注意感叹号。这意味着如果条件为false则返回true。因此，如果我们没有点击内容和的div，如果我们没有点击菜单元素，那么我们会隐藏div。

我希望你明白我的意思:)。

$(document).ready(function() { $('#menu').on('click', 'a', function() { $('.current').not($(this).closest('li').addClass('current')).removeClass('current'); var $this = $(this); // fade out all open subcontents var visibleElements = $('.pbox:visible'); if (visibleElements.length <= 0) { $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow'); } else { visibleElements.fadeOut('slow', function() { $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow'); }); } }); $(document).on('click', function(e) { if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) { $('.pbox').fadeOut('slow'); $("#menu .current").removeClass("current"); } }); });

ul#menu { margin: 0; padding: 0; list-style-type: none; text-align: center; } ul#menu li { position: relative; float: left; border-bottom: 4px solid #efefef; margin-right: 10px; padding-right: 0px; padding-bottom: 5px; display: inline-block; } ul#menu .current { border-bottom: 4px solid #3d496a; } ul#menu li:hover { border-bottom: 4px solid #3d496a; } ul#menu li a { padding: 2px 2px; text-decoration: none; font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color: #68759c; } ul#menu li a:hover { color: #8895b8; border: none; } .pbox { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu"> <li><a href="#" data-id="div1">Description</a> </li> <li><a href="#" data-id="div2">Shipping and payment</a> </li> <li><a href="#" data-id="div3">Returns</a> </li> <li><a href="#" data-id="div4">Feedback</a> </li> </ul> <br> <br> <div class="pbox" id="div1">First Div</div> <div class="pbox" id="div2">Second Div</div> <div class="pbox" id="div3">Third Div</div> <div class="pbox" id="div4">Fourth Div</div>

Answer 2

我只是删除了班级＆＃34;当前＆＃34;。但第一个div仍然出现，所以我创建另一个div，空，它的工作原理:)）

＆＃13;

$(document).ready(function () {
    $('.pbox:gt(0)').hide();
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        var $this = $(this);
        // fade out all open subcontents
        $('.pbox:visible').fadeOut('slow', function () {
            $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
        });
    });
});

＆＃13;

ul#menu {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    position:relative;
    float:left;
    border-bottom:4px solid #efefef;
    margin-right: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    display: inline-block;
}
ul#menu .current {
    border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
    border-bottom:4px solid #3d496a;
}
ul#menu li a {
    padding:2px 2px;
    text-decoration:none;
    font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}
ul#menu li a:hover {
    color:#8895b8;
    border:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#" data-id="div1">Description</a>
  </li>
  <li><a href="#" data-id="div2">Shipping and payment</a>
  </li>
  <li><a href="#" data-id="div3">Returns</a>
  </li>
  <li><a href="#" data-id="div4">Feedback</a>
  </li>
</ul>
<br>
<br>
<div class="pbox" id="div5"></div>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

＆＃13;

Answer 3

删除class="current"，因此一开始就没有活动

然后将第一个div设置为display:none;

单击时如何在div之间淡入淡出，从display none开始？

3 个答案: