jsはクリックしてカードを切り替える機能を実現します

<本文>
<h2>マルチタブクリックスイッチ</h2>
<ul id="タブ">
  <li id="tab1" value="1">10元セット</li>
  <li id="tab2" value="2">30元セット</li>
  <li id="tab3" value="3">月額50元</li>
</ul>
<div id="コンテナ">
  <div id="content1">
    10 元パッケージの詳細: <br/>&nbsp;月額パッケージ内での通話は 100 分、超過分は 0.2 元/分</div>
  <div id="content2" スタイル="display: none">
    30 元パッケージの詳細: <br/>&nbsp; 月間パッケージ内で 300 分の通話、超過分は 1.5 元/分</div>
  <div id="content3" スタイル="display: none">
    月額 50 元のパッケージの詳細: <br/>&nbsp;月間通話無制限</div>
</div>
</本文>

<スタイル>
    * {
      マージン: 0;
      パディング: 0;
    }
    #タブli {
      フロート: 左;
      リストスタイル: なし;
      幅: 80ピクセル;
      高さ: 40px;
      行の高さ: 40px;
      カーソル: ポインタ;
      テキスト配置: 中央;
    }
    ＃容器 {
      位置: 相対的;
    }
    #コンテンツ1、#コンテンツ2、#コンテンツ3 {
      幅: 300ピクセル;
      高さ: 100px;
      パディング: 30px;
      位置: 絶対;
      上: 40px;
      左: 0;
    }
    #タブ1、#コンテンツ1 {
      背景色: #ffcc00;
    }
    #タブ2、#コンテンツ2 {
      背景色: #ff00cc;
    }
    #タブ3、#コンテンツ3 {
      背景色: #00ccff;
    }
</スタイル>

//ネイティブjs
  var コンテナ = document.querySelectorAll('#container>div')
  var event_li = document.querySelectorAll('#tab>li')
  var 現在のインデックス = 0
  for(var i=0;i<event_li.length;i++){
    イベント_li[i].num=i
    event_li[i].onclick=関数(){
      コンテナ[現在のインデックス].style.display='なし'
      var index_other = this.num
      コンテナ[index_other].style.display='ブロック'
      現在のインデックス=インデックス_その他
  }}

//jQuery 実装では、親要素をクリックすると、すべての子要素が display_none になり、クリック イベントのある要素の子要素が display_block に設定されます。
var $container = $('#container>div')
$('#tab>li').click(function(){
  $container.css('表示', 'なし')
  var インデックス = $(this).index()
  var index_other = $(this).val()-1
  $container[index_other].style.display = 'ブロック'
})

//jQuery 実装では、親要素をクリックすると、最初の要素の子要素は display_none になり、クリック イベントのある要素の子要素は display_block に設定されます。
現在のインデックス=0
$('#tab>li').click(function(){
  $($container[currentindex]).css('display', 'none')
  var インデックス = $(this).index()
  $container[index].style.display = 'ブロック'
  現在のインデックス=インデックス
})