「:target 疑似クラス」のリンクから戻る際、URLに#を付与せず画面遷移したい

投稿者: Anonymous

最終的にやりたいこと
リンク先内容で、「:target 疑似クラス」のリンクから戻る際、URLに#を付与せず(かつページ再読込せず)画面遷移したい

先日jsで処理する方法を質問したのですが、クリックした際、CSSの「:target 疑似クラス」処理と「js」処理の両方を行う方法はあるでしょうか?


試したこと
・下記では「return false」しているため、「:target 疑似クラス」内容が反映されません

 function move0(){
        history.pushState(null,null,"./test.html");
        return false;
    }
<a href="javascript:void(0);" onclick="move0()"> 1 </a>

・下記ではjsの後#で呼び出しているので「:target 疑似クラス」内容は反映されるけれども、URLに#は付与されたままになります

 function move0(){
        history.pushState(null,null,"./test.html");
    }
<a href="#" onclick="move0()"> 1 </a>

解決

cssのtransition動作イベントを利用したサンプルを書いて見ました。参考になるでしょうか?

_x000D_

_x000D_

$(function(){_x000D_
            $("#navi").on("oTransitionStart mozTransitionStart webkitTransitionStart transitionstart", function(){_x000D_
               history.pushState(null, null, "./test2.html");_x000D_
            });_x000D_
        });

_x000D_

#navi {_x000D_
        position: fixed;_x000D_
        top: 0;_x000D_
        height: 100%;_x000D_
        width: 80%;_x000D_
        max-width: 400px;_x000D_
    }_x000D_
_x000D_
    #navi:not(:target) {_x000D_
        right: -100%;_x000D_
        transition: right 0.5s;_x000D_
    }_x000D_
_x000D_
    #navi:target {_x000D_
        right: 0;_x000D_
        transition: right 0.5s;_x000D_
    }

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<a href="#navi">test</a>_x000D_
_x000D_
<nav id="navi">_x000D_
    <a href="#" aria-label="Close Navigation"><i class="fa fa-times"></i></a>_x000D_
_x000D_
    <ul>_x000D_
        <li><a href="#">Link One</a></li>_x000D_
    </ul>_x000D_
</nav>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *