LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Forum

メインメニューについて、現在表示しているページ(モジュール)名をハイライトする方法

投稿ツリー


このトピックの投稿一覧へ

marine

なし メインメニューについて、現在表示しているページ(モジュール)名をハイライトする方法

msg# 1
depth:
0
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 .3 .4 .5 .6 .7 .8 .9 | 投稿日時 2012/7/11 22:40
marine  Lieutenant   投稿数: 464
メインメニューについて、現在表示しているページ(モジュール)名をハイライトするjavascriptを考案してみました。

基本はこんな感じで、CSSで activeクラスにハイライト表示の設定を記載することで対応します。

<script type="text/javascript">
jQuery(document).ready(function() {
	var url = location.href.split('index\.php')[0] ;
	jQuery('#mainmenu a[href="'+url+'"]).addClass('active');
});
</script>

cssファイル(style.cssなど)の例
.active {
	color:#ffffff;
	background-color:#0088cc;
}

cssファイルへの記述なしで、javascriptだけで対応するなら次のような感じでしょうか・・・

<script type="text/javascript">
jQuery(document).ready(function() {
	var url = location.href.split('index\.php')[0] ;
	jQuery('#mainmenu a[href="'+url+'"]).addClass('active');
	jQuery('.active').each(function(){
		jQuery(this).css({'color':'#ffffff','background-color':'#0088cc'});
	});
});
</script>

もしかしたら、次の記述の方がいいかな?

<script type="text/javascript">
jQuery(document).ready(function() {
	var url = location.href.split('index\.php')[0] ;
	jQuery('#mainmenu a[href="'+url+'"]).css({'color':'#ffffff','background-color':'#0088cc'});
});
</script>

よろしければ、お試しください。

あ、javascriptはテーマのヘッダに追記してくださいね。
投票数:1 平均点:10.00

  条件検索へ


Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities