CSSで作成したタブ切り替えメニューで別ページからタブごとにアンカーリンクを付けたい

前提・実現したいこと

CSSのみでタブ機能を実装しコンテンツの表示を切り替える方法
こちらを参考にCSSを使ってタブ切り替えを作成しました。

このタブ１−４に別ページからリンクを飛ばしたいのですが、
urlの後ろに#＊＊＊（https://example.com/#tab02の様な）がないので、
どのようにリンクを飛ばせば良いか躓いています。

javascript,jqueryについて初学者で知識不足で、
有識者の方がいらっしゃいましたら、ご教授頂ければ幸いでございますm(_ _)m
どうぞよろしくお願いいたします。

該当のソースコード

<div class="tabs">
    <!-- タブ -->
    <input id="tab01" type="radio" name="tab_item" checked>
    <label class="tab_item" for="tab01"><div><img src="" alt=""></div></label>
    <input id="tab02" type="radio" name="tab_item">
    <label class="tab_item" for="tab02"><div><img src="" alt=""></div></label>
    <input id="tab03" type="radio" name="tab_item">
    <label class="tab_item" for="tab03"><div><img src="" alt=""></div></label>
    <input id="tab04" type="radio" name="tab_item">
    <label class="tab_item" for="tab04"><div><img src="" alt=""></div></label>

    <!-- タブ1の中身 -->
    <div class="tab_content" id="tab01_content">
        <div class="tab_content_description">
            <p><img src="" alt=""></p>
        </div>
    </div>
    <!-- タブ2の中身 -->
    <div class="tab_content" id="tab02_content">
        <div class="tab_content_description">
            <p><img src="" alt=""></p>
        </div>
    </div>
    <!-- タブ3の中身 -->
    <div class="tab_content" id="tab03_content">
        <div class="tab_content_description">
            <p><img src="" alt=""></p>
        </div>
    </div>
    <!-- タブ4の中身 -->
    <div class="tab_content" id="tab04_content">
        <div class="tab_content_description">
            <p><img src="" alt=""></p>
        </div>
    </div>
</div>

.tab_item {
    width: 282px;
    height: 140px;
    background-color: #f5f4f1;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-radius: 26px;
    text-align: center;
    display: block;
    float: left;
    transition: all 0.2s ease;
    margin-bottom: 45px;
    }

   .tab_item:hover {
    opacity: 0.75;
    }

    /*ラジオボタンを全て消す*/
    input[name="tab_item"] {
    display: none;
    }

    /*タブ切り替えの中身のスタイル*/
    .tab_content {
    display: none;
    clear: both;
    overflow: hidden;
    margin-bottom: 70px;
    }

/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content {
display: block;
}

/*選択されているタブのスタイルを変える*/
input:checked + .tab_item {
border: 7px solid #9bd200;
box-sizing: border-box;
}