如何实现点击切换div淡入淡出效果且初始状态为display none？

没问题，我来帮你搞定这个小改动！你的需求很明确——让所有.pbox div初始都处于隐藏状态，其实只需要两处小调整就能实现：

1. 用CSS统一设置初始隐藏（推荐） #

原来的代码里只给#div1加了display:none，但我们需要所有.pbox都默认隐藏，所以把CSS里的#div1 {display:none;}替换成：

.pbox { display: none; }

用CSS控制初始状态比JS更高效，还能避免页面加载时的元素闪烁问题。

2. 移除JS里多余的隐藏代码 #

原来的JS开头有一行$('.pbox:gt(0)').hide();，这行是用来隐藏除了第一个.pbox之外的其他元素，现在我们已经用CSS把所有都隐藏了，这行代码就可以删掉啦。

修改后的完整代码如下：

HTML

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

CSS

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; } /* 这里是修改的核心 */

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');
    });
  });
});

这样修改后，所有div一开始都是隐藏的，点击菜单按钮时会正常切换显示对应的内容，完全符合你的需求～

内容的提问来源于stack exchange，提问作者user2498890