URLの表示内容を変更する

今回も仕事で調べた内容です。

指定した文言を URL バーに表示する方法です。
備忘録として保存しておきたいと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('button').click( function () {
                    location.hash = '#' + $(this).html();
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin  : 10px;
                padding : 10px;
                border  : 1px #000000 solid;
            }
        --></style>
        
    </head>
    <body>

        <h1>URL hash</h1>
        <p>Please URL Check</p>
        <div>

            <p>
                <button class="btn_text1">text1</button>
                <button class="btn_text2">text2</button>
                <button class="btn_text3">text3</button>
                <button class="btn_text4">text4</button>
                <button class="btn_text5">text5</button>
            </p>

        </div>

    </body>
</html>

sample

sampleページでボタンを click したときに URL バーの文言がボタンに沿ったテキストが表示されます。

実際に処理を行うに当たっては特に意味があるわけではないのかなぁ、と思っていました。
あえていうと、「表示をすることで URL の表記をわかりやすくできる程度かな・・・」と

実際に試してみると少し違いました。
URL に hash を追加してみると、ブラウザバックが対応してくれます。
ブラウザのバック機能を制御できるのは面白い使い方ができそうですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です