42239


**最終的にやりたいこと**  
・[リンク先内容](http://coliss.com/articles/build-websites/operation/css/target-
pseudo-class-trick.html)で、「:target
疑似クラス」のリンクから戻る際、URLに#を付与せず(かつページ再読込せず)画面遷移したい

・[先日jsで処理する方法を質問した](https://ja.stackoverflow.com/questions/41980/%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E7%A7%BB%E5%8B%95%E3%81%97%E3%81%9F%E5%BE%8C-%E4%BB%98%E4%B8%8E%E3%81%9B%E3%81%9A%E7%94%BB%E9%9D%A2%E6%9B%B4%E6%96%B0%E3%81%9B%E3%81%9A-%E5%85%83%E3%81%AE%E7%8A%B6%E6%85%8B%E3%81%B8%E9%81%B7%E7%A7%BB%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84)のですが、クリックした際、CSSの「:target
疑似クラス」処理と「js」処理の両方を行う方法はあるでしょうか？

* * *

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

[code]

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

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

[code]

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


CC BY-SA 3.0
2018-03-08T07:49:35.260
42221
2018-03-08T14:09:08.087
7886
question
javascript css
「:target 疑似クラス」のリンクから戻る際、URLに#を付与せず画面遷移したい


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

[code]

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

[code]

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

[code]

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


CC BY-SA 3.0
2018-03-08T14:09:08.087
42239
2018-03-08T14:09:08.087
22793
42221
answer