同じタブを選択したときに開閉の閉ができない

Question

タブが2つあり、同じタブを押した時に開閉できるようにしたいのですが、閉ができません。
既存のページを修正しているのでなるべくこのままのコードでどんなコードを追加すればそのようなことができるのか教えていただけますでしょうか。

よろしくお願いいたします。

<div class="tabs">
    <ul>
      <li><a href="">タブ1</a></li>
      <li><a href="">タブ2</a></li>
    </ul>
  </div>
   <div class="page_01">タブ１の内容</div>
   <div class="page_02">タブ2の内容</div>

<script>
(function($){
$('.tabs li a').on('click',function(){
  $('.tabs li').removeClass('off');
  $('.page_01').css('display','none');
  $('.page_02').css('display','none');
  var index = $('.tabs li a').index(this);
  if(index == 0){
    $('.tabs li:nth-of-type(2)').addClass('off');
    $('.page_01').css('display','block');
  }
  else if(index == 1){
    $('.tabs li:nth-of-type(1)').addClass('off');
    $('.page_02').css('display','block');
  }
  return false;  
});
</script>

Comments

[kei344]

base要素は空要素なので、HTMLが間違っています。また、getPositionの定義部分も提示してください。

【<base>: 文書の基底 URL 要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/base
> 許可されている内容 なし。この要素は空要素。

[nanakote_s]

ご指摘ありがとうございます。誰が作ったかわからないページを修正しているので、なるべくそのままの形でコードを追加するだけで解決できればと思い質問しました。getPositionの定義部分とはどういうことでしょうか？質問者はそういうレベルです。

[kei344]

関数は定義しないと実行できません。どこかにその定義されたものがあるはずで、無ければエラーになります。それの書かれている場所を含め、問題が再現するコードを提示してください。

Answer 1

こういうことですかね？

<script>
$(function(){
  $('.page').hide();
  $('.tabs a').on('click',function(e){
    e.preventDefault();
    var idx=$('.tabs a').index(this);
    $('.page').hide().eq(idx).show();
  });
});
</script>
<div class="tabs">
<ul>
<li><a href="#">タブ1</a></li>
<li><a href="#">タブ2</a></li>
</ul>
</div>
<div class="page">タブ１の内容</div>
<div class="page">タブ2の内容</div>