使用jQuery UI选项卡淡出

<div id="tabs">
  <ul>
    <li><a href="#tab1">选项卡1</a></li>
    <li><a href="#tab2">选项卡2</a></li>
    <li><a href="#tab3">选项卡3</a></li>
  </ul>
  <div id="tab1">
    <p>选项卡1的内容</p>
  </div>
  <div id="tab2">
    <p>选项卡2的内容</p>
  </div>
  <div id="tab3">
    <p>选项卡3的内容</p>
  </div>
</div>

$(function() {
  $("#tabs").tabs({
    hide: { effect: "fade", duration: 500 }, // 设置淡出效果
    show: { effect: "fade", duration: 500 }  // 设置淡入效果
  });
});

#tabs {
  width: 400px;
  height: 300px;
}

#tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#tabs ul li {
  display: inline;
}

#tabs div {
  padding: 10px;
}