東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】タブ切り替え

<!-- ボタン -->
      <ul id="tab">
        <li class="select">ボタン1</li>
        <li>ボタン2</li>
        <li>ボタン3</li>
        <li>ボタン4</li>
      </ul>

<!-- 変わるコンテンツ -->

      <div class="safety_cw">
        <div class="content_wrap no1">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no1 -->
        <div class="content_wrap no2 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no2 -->
        <div class="content_wrap no3 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no3 -->
        <div class="content_wrap no4 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no4 -->
$(function() {

    $("#tab li").click(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});


ミソのcssのみかく。切り替わるコンテンツボックスのcontent_wrapにabsoluteをかけてかさね、最初に表示させるcontent_wrap以外はdisnonを付与。このdisnonはvisibility:hiddenからvisibleにかえること。displayのnoneからblockだとtransitionがきかない。

.disnon {
  /* display: none; */
  visibility: hidden;
  opacity: 0!important;
}

.content_wrap {
    min-height: 663px;
    border: 1px solid #9a7c52;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 1;
    position: absolute;
    width: 100%;
}

【参考URL】
http://www.finefinefine.jp/jquery/kiji422/