javascript - HTMLであるページを他のページと区別する

Question

適切なタイトルが思いつかなかったので、タイトルが誤解を招くと思います。

デモしたい4つのWebページがあります..

[page1] [page2] [page3] [page4]

私が欲しいのは..すべてのページの上に..これらの「ボタン」を4つ（または他のもの）持っていることです

私がページ1にいるとき..ページ1ボタンは太字で、残りの3つは明るい..私がページ2にいるとき..ページ2ボタンは太字など..

そして、それぞれが相互にリンクしていること。

助言がありますか

Answer 1

<style>

button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #123d54;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #afd9fa 0%,
        #588fad);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#afd9fa),
        to(#588fad));
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #003366;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.7),
        0px 1px 0px rgba(255,255,255,0.3);
    }

button.current {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #faafaf 0%,
        #d11919);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#faafaf),
        to(#d11919));
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #003366;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.7),
        0px 1px 0px rgba(255,255,255,0.3);
}
</style>

<a href="/page1.html">
    <button class="current">Demo Page 1</button>
</a>

<a href="/page1.html">
    <button class="">Demo Page 2</button>
</a>

<a href="/page1.html">
    <button class="">Demo Page 3</button>
</a>

<a href="/page1.html">
    <button class="">Demo Page 4</button>
</a>

上記を各ページの上部にコピーします。最初のページではボタンクラスが最新である必要があり、2 番目のページでは 2 番目のボタンが最新である必要があります。

ボタンは、説明のために生成されたCSS3 ボタンです。