現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開
2009年03月09日-
現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開しました。
「 トップページ | リンク | 掲示板 」といったナビゲーションメニューがあると思いますが、アクティブな場合に、太字にして<a>を消すっていう処理をphpなどで書いている場合があると思いますが、非常にコードが見づらくなって、メニューが増えるたびに面倒な分岐処理を追記しなければなりませんでした。
(面倒な分岐の例)
<?php if ($current_url == "link.php") { ?>
<strong>リンク集</strong>
<?php } else { ?>
<a href="link.php">リンク集</a>
<?php } ?>
ということで、CurrentPage.jsを作りました。
デモページはこちら
設置は簡単で、<a> タグに class="currentpage" を指定して、後ほどcurrentpage.jsを読み込むだけです。
<a href="index.php" class="currentpage">toppage</a> |
<a href="2.php" class="currentpage">links</a> |
<a href="3.php" class="currentpage">profile</a> |
<a href="4.php" class="currentpage">bbs</a> |
<a href="5.php" class="currentpage">diary</a><br>
<script type="text/javascript" src="currentpage.js"></script>
単体でも使えるよう、jQueryのプラグインとかにはなっていないので、そうしたい方は書き直すのもよいかもしれません。
jQueryだと数行で実現できそうです(^^;
aタグの後で読み込むのがダサいという方はonloadイベントに記述してください。
currentpage.js のConfig
currentpage.js 内の変数を変えることで若干ですが挙動を変更できます。
// カレントページの文字の色 style.color の値
var current_color = 'black';
// カレントページのボールディング style.fontWeightの値
var current_fontWeight = 'bold';
// カレントページの style.textDecorationの値
var current_textDecoration = 'none';
// ディレクトリルートにアクセスした場合のデフォルトページの定義。デフォルトでも問題ないかと思いますが index.jspみたいな方は調整が必要
var defaultpages = ['index.html','index.htm','index.php','index.asp','default.htm'];
ページ構築にお役立て頂けると幸いです。
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ