激安!家電のタンタンショップは
こちら!
参考URL
前提
- jquery-1.2.6.pack.jsを使用します
このページはjqueryに興味をもった作者のtipsです(予定)。間違いがあればご指摘ください
jQueryのインストール
jQueryといっても正体はjsファイルなのでjsファィルをダウンロードして普通の外部jsファィルのように設定するだけ。
- DL対象ファィル
- Uncompressed(非圧縮。ソース解析用)
- Minified and Gzipped
- Packed(圧縮。ようするに改行とかがない)
→いずれかをDL
<script type="text/javascript" src="./ui/js/jquery-1.2.6.pack.js"></script>
クリックしても上部に飛ばないかつ、hoverの色とかCSSで制御したい場合
<a href="#" onclick="sample()">あああ<a>
としているとページが上部に一瞬戻ってからいくので見苦しい
また
<a href="javascript:sample()">あああ</a>
みたいにすると連打したときに"return false"となる場合もあったりする。
またaタグに対して以下のようなCSSを定義していた場合も含めて
処理をする。
a:link{color:#000000;}
a:visited{color:#000000;}
a:hover{color:#FFFFFF;}
a:active{color:#FFFFFF;}
- まずリンク部をaタグをやめてspanに変更。適当なclassを設定
<span class="samplelink" onclick="sample()">あああ</span>
<script type="text/javascript" src="./ui/js/jquery-1.2.6.pack.js"></script>
<script language=javascript>
<!--
$(function(){
$(".samplelink").mouseover(function(){
this.style.color = "#FFFFFF";
});
(".samplelink").mouseout(function(){
this.style.color = "#000000";
});
});
-->
</script>
※.(ピリオドはクラス名を指定)。thisでその対象だけにする。
- CSSに以下を記述(最初の表示でリンクっぽくするため)
.samplelink{
cursor:pointer;
color:#0000000;
text-decoration:underline;
}
最終更新:2008年06月06日 13:01