jquery.cookie.jsの使用時、切り替えをスムーズにしたい。

問題点

このサイトを見て、自分の制作物にも取り入れたいと思いましたが問題点があり解決したい。

問題点：リロードした際に一瞬初期の値が表示されてしまう。

下記は上記のリンクのコードの写しです
jquery.cookie.jsも入れてます。

jquery
1$(function () {
2  var index = 0;
3  
4  // クッキーのindexを取得し読み込み時にオープンする
5  if ($.cookie('index')) {
6    index = $.cookie('index');
7    $('li').removeClass('selected').eq(index).addClass('selected');    
8    $('article').hide().eq(index).show();
9  } 
10  
11  $('li').click(function() {
12    if (index != $('li').index(this)) {
13      index = $('li').index(this);
14      // タブの内容
15      $('article').hide().eq(index).fadeIn('fast');
16      // タブ
17      $('li').removeClass('selected').eq(index).addClass('selected');
18
19      // 有効期限は1日（クッキーにはドメインをセットしない、ブラウザを閉じたら初期化）
20      $.cookie('index', index, { expires: 1 });      
21    }
22  });
23});

css
1article {
2  display: none;
3}
4
5article.selected {
6  display: block;
7}

html
1<ul id="tab">
2<li class="selected">タブ 1</li>
3<li>タブ 2</li>
4<li>タブ 3</li>
5<li>タブ 4</li>
6</ul>
7<div id="detail">
8<article class="selected"><p>タブ 1の内容</p></article>
9<article><p>タブ 2の内容</p></article>
10<article><p>タブ 3の内容</p></article>
11<article><p>タブ 4の内容</p></article>
12</div>

初期はタブ１が自動選択されており、タブ３を選択したまま画面をリロード（読み込み）すると、タブ３が選ばれたままになるようにするものですが、リロード時にタブ３の３の部分が一瞬１が表示されその後３が出てくるようになってしまいます。

実現したいこと

１．１が出てこないようにしたいです。

回答頂けたら助かります。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<style>
2#tab li.selected{color:red}
3</style>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
6<script>
7$(function () {
8  var index=$.cookie('index')||0;
9  $('li').on('click',function() {
10    index=$('li').index(this);
11    $('li').removeClass('selected').eq(index).addClass('selected');
12    $('article').hide().eq(index).fadeIn();
13    $.cookie('index', index, { expires: 1 });
14  }).eq(index).trigger('click');
15  $('#del').on('click',function(){
16    $.removeCookie('index');
17  });
18});
19
20</script>
21<ul id="tab">
22<li class="selected">タブ 1</li>
23<li>タブ 2</li>
24<li>タブ 3</li>
25<li>タブ 4</li>
26</ul>
27<div id="detail">
28<article style="display:none"><p>タブ 1の内容</p></article>
29<article style="display:none"><p>タブ 2の内容</p></article>
30<article style="display:none"><p>タブ 3の内容</p></article>
31<article style="display:none"><p>タブ 4の内容</p></article>
32</div>
33<input type="button" value="del cookie" id="del">