現ページのリンクの非アクティブ化にもう面倒な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'];
ページ構築にお役立て頂けると幸いです。
最新のブログ記事(新着順)
- 15000以上のいい感じの線形アイコン「Lineicons」
- CSSやTailwindでのCSSスニペットライブラリ「CSS Snippets Library」
- AIを使ってサイトマップが作れる「Octopus.do」
- ライブラリ依存のないモーダルオープンライブラリ「Blendy」
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- 過去のエントリ