アンカーリンクからタブ内のリンク先を開けますか？

Question

前提・実現したいこと

初めて質問いたします。
Javascriptを使用し、タブを動かしています。

同じページにある、複数のアンカーリンクから、
タブを開き、該当のアンカーまでスクロール、画面表示をさせたいです。
ページ内リンクが複数あり、タブ外から→タブ内アンカーへのリンクで、
同じ質問が見つけらなかったので質問させていただきました。

• アンカーリンク1は、タブ1の#aaaへ。
• アンカーリンク2は、タブ3の#bbbへ。

どなたかご教授ください。
どうぞ宜しくお願いします。

該当のソースコード

<a href="#aaa" onclick="OnLinkClick();">&gt;&gt;タブ1の中にあるページ内リンクに飛ぶリンク</a>
<a href="#bbb" onclick="OnLinkClick();">&gt;&gt;タブ3の中にあるページ内リンクに飛ぶリンク</a>

<div class="tabs">
  <input id="feature" type="radio" name="tab_item" checked>
  <a href="javascript:void(0);" class="btn_act active"><label class="tab_item" for="feature"><span>▼</span>タブ1</label></a>
  <input id="programming" type="radio" name="tab_item">
  <a href="javascript:void(0);" class="btn_act"><label class="tab_item" for="programming"><span>▼</span>タブ2</label></a>
  <input id="design" type="radio" name="tab_item">
  <a href="javascript:void(0);" class="btn_act"><label class="tab_item" for="design"><span>▼</span>タブ3</label></a>
  <div class="tab_content" id="motion_area1">
    <div class="tab_content_description">
      <p >タブを開いた中身1</p>
       <p >タブを開いた中身1</p>
       <p >タブを開いた中身1</p>
       <p >タブを開いた中身1</p>
       <p >タブを開いた中身1</p>
       <p id="aaa">ページ内リンクで飛びたい場所</p>
    </div>
  </div>
  <div class="tab_content" id="motion_area2">
    <div class="tab_content_description">
      <p >
	 　　　タブを開いた中身2
	  </p>
    </div>
  </div>
  <div class="tab_content" id="motion_area3">
    <div class="tab_content_description">
      <p >タブを開いた中身3</p>
      <p >タブを開いた中身3</p>
      <p >タブを開いた中身3</p>
      <p >タブを開いた中身3</p>
      <p >タブを開いた中身3</p>
      <p >タブを開いた中身3</p>
       <p id="bbb">ページ内リンクで飛びたい場所</p>
    </div>
  </div>	
</div>
<script language="javascript" type="text/javascript"> 
$(function(){
    $("a.btn_act").click(function(){
        var connectCont = $("a.btn_act").index(this);
        var showCont = connectCont+1;
        $('.tab_content').css({display:'none'});
        $('#motion_area'+(showCont)).slideDown('normal');
 
        $('a.btn_act').removeClass('active');
        $(this).addClass('active');
    });
});		
</script>

試したこと

下記リンクなど5例ほど試してみたりはしたのですが、
https://teratail.com/questions/22933
タブ内からタブ内であったり、ページ外からのリンクであったり、
希望としているものでは無かったこともあり、やはりうまく動作しませんでした。

また、CSSでタブを作った際には下記を使用して動かすことはできたのですが、
下記のscriptですと、一つのアンカーリンクにしか使えず。。
詳しくない為に応用することが出来ませんでした。

<script language="javascript" type="text/javascript"> 
  function OnLinkClick() { 
    var elements = document.getElementsByName( "tab_item" ) ; 
　    elements[2].checked = true ; 
	 /*  elements[0]⇒タブ1、elements[1] ⇒タブ1、elements[2] ⇒タブ3　*/
  } </script>

。

Answer 1

ようはタブを開いてから飛べばいいわけです。

まず、アンカーと label を両方使わず、label のみにしておきましょう。表示は CSS で調整してください。

  <input id="feature" type="radio" name="tab_item" class="btn_act active" checked="checked">
  <label class="tab_item" for="feature"><span>▼</span>タブ1</label>
<!-- 以下同様 -->

それにあわせてスクリプトも修正しておきます。

    $('[name="tab_item"]').click(function(){
        var connectCont = $('[name="tab_item"]').index(this);

さらに onclick のほうも event を渡すようにしておきます。

<a href="#aaa" onclick="OnLinkClick(event);">&gt;&gt;タブ1の中にあるページ内リンクに飛ぶリンク</a>
<a href="#bbb" onclick="OnLinkClick(event);">&gt;&gt;タブ3の中にあるページ内リンクに飛ぶリンク</a>

そうすると、event.preventDefault() でリンクの動作を殺すことができるので400ミリ秒後にスクロールできるようになります。
瞬時にスクロールしたい場合は考えてみてください。

  function OnLinkClick(event) { 
    var elements = document.getElementsByName( "tab_item" ) ; 
    var p = $($(event.currentTarget).attr('href'));
    var num = parseInt(p.closest('.tab_content').prop('id').substring(11), 10);
    $(elements[num - 1]).trigger('click');
    setTimeout(function() {
      p[0].scrollIntoView();
    }, 400);
    event.preventDefault();
  }

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

Comments

[退会済みユーザー]

早速回答依頼を受けて下さりありがとうございます。!!
おかげさまで無事、希望としている動きが叶いました。
スクロールの件も、400を0にして、瞬時スクロールへ変更することが出来ました。
大変わかりやすく、とてーも勉強になりました。
ひとつひとつ読み解いて、落とし込みたいと思います。
本当にありがとうございます。