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>