読者です 読者をやめる 読者になる 読者になる

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

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

【jQuery】タブ切り替え2(レスポンシブ対応でdisplay:noneからのfadein)

        <ul id="click_box2">
          <li class="select">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
        </ul><!-- click_box2 -->


      <div class="f_r">
        <div class="content_wrap disnon show">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->
      </div><!-- f_r -->
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
	  
.disnon {
  display: none;
}
	
.disnon.show{
    display: block;
    animation: show 1s linear 0s;	  
}

$(function(){
	// タブ切り替え
	$("#click_box2 li").click(function() {
        var num = $("#click_box2 li").index(this);
        $(".content_wrap").removeClass('show').addClass('disnon');
        $(".content_wrap").eq(num).addClass('show');
        $("#click_box2 li").removeClass('select');
        $(this).addClass('select')
    });
});