Top / Jquery / Jquery-4


Navigatiorに.current表示をする

このQHMのページがそうですが、jQueryを使ってナビ部分にcurrentが使えます。
まず、currentをcssに追加します。このホームページはbacgroundに画像を使っていますので、こんな指定になってます。

#navigator li a{
	color: #777;
	text-decoration: none;
	display: block;
	float: left;
	line-height: 120%;
	padding-top: 11px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	font-size: 11px;
}
#navigator li a:hover{
	color: #ffffff;
	background: #ffffff url("current-bg.gif") top left repeat-x;
}
#navigator li a:active{
	color: #333;
	background: #ffffff url("current-bg2.gif") top left repeat-x;
}
/---ここからが追加部分---
#navigator li a:current{
	color: #000000;
	background: #ffffff url("current-bg.gif") top left repeat-x;
}



次に下記をサイト情報の設定の「その他のタグ」に書きます。
jquery-accordionのファイルはjsフォルダに入っていることが前提です。
jquery.js, chili-1.7.pack.js, jquery.easing.js, jquery.dimensions.js, jquery.accordion.jsの5つです。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
	jQuery().ready(function(){
		// second simple accordion with special markup
		jQuery('#navigator').accordion({
			active: false,
			header: '.head',
			navigation: true,
			event: 'mouseover',
			fillSpace: true,
			animated: 'easeslide'
		});
		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		var accordions = jQuery('#list1a, #list1b, #list2, #navigation3');
		
		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
</script>

Jquery/Jquery-4