jqueryで動くタブをカスタマイズしたいです。

Question

jqueryに詳しい方教えてください。
下記のコードでタブが問題なく動いています。

<!-- タブメニュー
 activeクラスに、クリック済のデザインを設定したcssを指定 -->
<ul class="tab clearfix">
  <li class="active">ab</li>
  <li>cd</li>
</ul>

<!-- コンテンツ
 全体を非表示にし、showクラスが付いたコンテンツのみ表示 -->
<div class="area">
  <ul class="show">
    <li>ab</li>
    <li>ab</li>
    <li>ab</li>
  </ul>
  <ul>
    <li>cd</li>
    <li>cd</li>
  </ul>
</div>

.tab {
  border-bottom: 3px solid #fb4343;
}
.tab li {
  color: #333;
  float: left;
  margin: 0 10px -1px 0;
  padding: 10px 20px;
  border: 1px solid #fb4343;
  cursor: pointer;
  list-style: none;
  transition: .3s;
}
.tab li.active {
  color: #fff;
  background: #fb4343;
  cursor: auto;
}

.area ul {
  display: none;
}
.area ul.show {
  display: block;
}

$(function() {

  // ①タブをクリックしたら発動
  $('.tab li').click(function() {

    // ②クリックされたタブの順番を変数に格納
    var index = $('.tab li').index(this);

    // ③クリック済みタブのデザインを設定したcssのクラスを一旦削除
    $('.tab li').removeClass('active');

    // ④クリックされたタブにクリック済みデザインを適用する
    $(this).addClass('active');

    // ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
    $('.area ul').removeClass('show').eq(index).addClass('show');

  });
});

これをdiv.area内のulはそのままにし、tabのab,cdの順序を入れ替えるのにはどうすればいいのでしょうか。
下記のように変えると次のように表示がおかしくなります。

ページを表示した時cdが表示（正常）→abをクリックするとタブが動かない（異常）→cdをクリックするとabが表示（異常）

ご教授宜しくお願いします。
（レスポンシブデザインでtabを使っているのはモバイルのみで、pcはタブの切り替えなしで全表示のためdiv.area内のulの順序を入れ替えたくありません）

<!-- タブメニュー
 activeクラスに、クリック済のデザインを設定したcssを指定 -->
<ul class="tab clearfix">
  <li class="active">cd</li>
  <li>ab</li>
</ul>

<!-- コンテンツ
 全体を非表示にし、showクラスが付いたコンテンツのみ表示 -->
<div class="area">
  <ul>
    <li>ab</li>
    <li>ab</li>
    <li>ab</li>
  </ul>
  <ul class="show">
    <li>cd</li>
    <li>cd</li>
  </ul>
</div>

Comments

[m.ts10806]

おかしくなる とは？想定している動作と実際に起きている現象を具体的に記載してください

[dstrykn]

失礼いたしました。編集いたしました。次のように表示がおかしくなります。ページを表示した時cdが表示（正常）→abをクリックするとタブが動かない（異常）→cdをクリックするとabが表示（異常）。教えていただけたら助かります。よろしくお願いします。

[dstrykn]

実際にしたいのは、ページを表示した時cdが表示→abをクリックするとabが表示→cdをクリックするとcdが表示です。

Answer 1

こうですかね。

<div class="area">
  <ul class="show">
    <li>cd</li>
    <li>cd</li>
  </ul>
  <ul>
    <li>ab</li>
    <li>ab</li>
    <li>ab</li>
  </ul>
</div>

JavaScriptでindex（要は何番目の要素か）を取得しているので、
html的にも順番を変えてあげないといけない作りのようです。

Comments

[dstrykn]

ご回答ありがとうございます。
やはり、そうなんですね。
実は<li>がもっと多数あり、それぞれcssのposition:absolute;で指定しているので、できればcssを作り直さずできないかと考えていたところでした。
JavaScriptをいじるのは難しいのでしょうか。

[m.ts10806]

んー。
タブのliとコンテンツのulを紐づけるようにする必要があるので、
JavaScriptだけを修正してというのは難しいと思います。
htmlを修正しなくても「このタブは何番目のul」のような関連付けの配列を持たせるとか、一工夫が必要です。

[dstrykn]

ご回答ありがとうございます。
わかりました。
css修正してやってみます。

[m.ts10806]

あれ？私の回答はCSSではなくhtmlを修正しているんですが、
結局どうしようとしていますか？

[dstrykn]

ご返信に気づいておりませんでした。申し訳ございません。
ご回答頂いた内容で実装できました！ありがとうございました！

[m.ts10806]

解決されたようで何よりです