jQuery¸«ËܻԡÊ1¡ËjQuery¤Ç¥¿¥Ö¤òÀÚ¤êÂؤ¨¤ë
º£Æü¤«¤é¡¢¥Û¡¼¥à¥Ú¡¼¥¸¤Î¥ê¥Ë¥å¡¼¥¢¥ë¤Ë»È¤¨¤ëjQuery¾ðÊó¤ò¾Ò²ð¤·¤Æ¤¤¤¤¿¤¤¤È»×¤¤¤Þ¤¹¡£
º£²ó¤Ï¡¢jQuery¤ò¤Ä¤«¤Ã¤¿¥¿¥Ö¤ÎÀÚ¤êÂؤ¨¡£¤³¤ì¤Ï¼Â¤Ï¥×¥é¥°¥¤¥ó¤Ï»È¤¤¤Þ¤»¤ó¡£À¸¤ÎjQuery¤Ç¿ô¹Ô¥³¡¼¥É¤ò½ñ¤±¤Ð¼Â¸½½ÐÍè¤Æ¤·¤Þ¤¦¤ó¤Ç¤¹¡£
¤Þ¤º¤Ï¡¢¼ÂÎã¤ò¸«¤Æ¤¤¤¿¤À¤¤Þ¤·¤ç¤¦¡£¼Â¤Ï¤³¤Î´ë²è¤Î¤¿¤á¤Ë¥µ¥ó¥×¥ë¤ò·ÇºÜ¤¹¤ë¥µ¥¤¥È¤ò1¤Äºî¤ê¤Þ¤·¤¿¡£¤³¤Á¤é¡¢jQuery¸«ËܻԡÃjQuery¤Ç¥¿¥Ö¤òÀÚ¤êÂؤ¨¤ë¤ò¤´Í÷¤¯¤À¤µ¤¤¡£¾åÉô¤Î¥¿¥Ö¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¥³¥ó¥Æ¥ó¥Ä¤¬¤Ñ¤Ã¤ÈÀÚ¤êÂؤï¤Ã¤Æɽ¼¨¤µ¤ì¤Þ¤¹¡£º£²ó¤Ï¤³¤ì¤òºî¤Ã¤Æ¤¤¤¤Þ¤¹¡£
¢£jQuery¤ò¥¤¥ó¥¹¥È¡¼¥ë¤¹¤ë
ºÇ½é¤ËjQuery¤ò»È¤¦½àÈ÷¤Ç¤¹¡£jQueryËÜÂΤò¥¤¥ó¥¹¥È¡¼¥ë¤·¤Þ¤¹¡£¤ä¤êÊý¤Ï2¤Ä¤¢¤Ã¤Æ¡¢1¤Ä¤ÏÇÛÉÛ¥µ¥¤¥È¤«¤éjQuery¤Î¥³¡¼¥É¤ò¥À¥¦¥ó¥í¡¼¥É¤·¡¢¤½¤ì¤ò¼«Ê¬¤Î¥µ¥¤¥È¤Ë¥¢¥Ã¥×¥í¡¼¥É¤·¤ÆHTML¤«¤é»ØÄꤹ¤ëÊýË¡¡¢¤â¤¦°ì¤Ä¤Ï¥Í¥Ã¥È¥ï¡¼¥¯¾å¤Ë¥Û¥¹¥È¤µ¤ì¤Æ¤¤¤ëjQuery¤òURL¤Ç»ØÄꤷ¤Æ»ÈÍѤ¹¤ëÊýË¡¤Ç¤¹¡£º£²ó¤Ï¤Þ¤ºÁ°¼Ô¤Î¥À¥¦¥ó¥í¡¼¥É¤Ç¤ä¤Ã¤Æ¤ß¤ë¤³¤È¤Ë¤·¤Þ¤¹¡£
¥À¥¦¥ó¥í¡¼¥É¥µ¥¤¥È¤Ï¤³¤Á¤éjQuery¥µ¥¤¥È¤Î¥À¥¦¥ó¥í¡¼¥É¥Ú¡¼¥¸¤Ç¤¹¡£
jQuery¤Ë¤Ï1.x·ÏÎó¤È2.x·ÏÎ󤬤¢¤ê¤Þ¤¹¡£µ¡Ç½¤Ï¤É¤Á¤é¤âƱ¤¸¤Ç¤¹¤¬¡¢2.x·ÏÎó¤ÏIE8°ÊÁ°¤Î¸Å¤¤¥Ö¥é¥¦¥¶¤ò¥µ¥Ý¡¼¥È¤·¤Æ¤¤¤Þ¤»¤ó¡£º£²ó¤Ï1.x·ÏÎó¤ò»È¤¦¤³¤È¤Ë¤·¤Þ¤¹¡£°ìÈÖ¾å¤Î¡ÖDownload the compressed production jQuery 1.11.1¡×¤ò¥À¥¦¥ó¥í¡¼¥É¤·¤Æ¤¯¤À¤µ¤¤¡£compressed¤Ç¤Ï¸«¤¿ÌܤòÎɤ¯¤¹¤ë¤¿¤á¤Î²þ¹Ô¤ä¥¹¥Ú¡¼¥¹Åù¤¬¾Ê¤«¤ì¤Æ¤®¤å¤Ã¤È°µ½Ì¤µ¤ì¤¿¾õÂ֤ˤʤäƤ¤¤Þ¤¹¡£¥À¥¦¥ó¥í¡¼¥É¤·¤¿¥Õ¥¡¥¤¥ë¤Ï¡¢»ÈÍѤ·¤¿¤¤¥µ¡¼¥Ð¤Ë¥¢¥Ã¥×¥í¡¼¥É¤·¤Æ¤ª¤¤¤Æ¤¯¤À¤µ¤¤¡£»ä¤Ï¥ë¡¼¥È¥Õ¥©¥ë¥À¤Ë¡Öjs¡×¤È¤¤¤¦¥Õ¥©¥ë¥À¤ò¤Ä¤¯¤Ã¤Æ¡¢¤½¤³¤ËÆþ¤ì¤Æ¤ª¤¤Þ¤·¤¿¡£
¥¢¥Ã¥×¥í¡¼¥É¤·¤¿¤é¡¢¼¡¤Ë¤½¤Î¥Õ¥¡¥¤¥ë¤ò»ØÄꤹ¤ë¥³¡¼¥É¤òhtml¤Î¥Ø¥Ã¥À¤Ëµ½Ò¤·¤Þ¤¹¡£
<script src="js/jquery-1.11.0.min.js"></script>
»È¤¤¤¿¤¤HTML¥Õ¥¡¥¤¥ë¤Î¤¢¤ê¤«¤«¤é¤ÎÁêÂХѥ¹¤Ç¥Õ¥¡¥¤¥ë¤ò»ØÄꤷ¤Æ¤¯¤À¤µ¤¤¡£»ä¤ÏÀèÄøjs¤È¤¤¤¦¥Õ¥©¥ë¥À¤Ë¥¢¥Ã¥×¥í¡¼¥É¤·¤¿¤Î¤Ç¡¢js/¡¦¡¦¡¦¤È¤Ê¤Ã¤Æ¤¤¤Þ¤¹¡£°Ê¾å¤Ç½àÈ÷´°Î»¤Ç¤¹¡£
¢£jQuery¤Î¥³¡¼¥É¤òµ½Ò¤¹¤ë
jQuery¤Îʸˡ¤Î´ðËܤϼ¡¤Î·Á¼°¤Ç¤¹¡£
jQuery(½èÍýÂоÝ).¥³¥Þ¥ó¥É(½èÍýÆâÍÆ);
¤³¤ÎºÇ½é¤Î¡ÖjQuery¡×¤Îʸ»ú¤Ï¤Ê¤ó¤È¡Ö$¡×¤Î1ʸ»ú¤ËÃÖ¤´¹¤¨²Äǽ¤Ç¤¹¤Î¤Ç¡¢°Ê¹ß¤Ï¡ð¤Ç¹Ô¤¤¿¤¤¤È»×¤¤¤Þ¤¹¡£¤³¤ì¤ò»È¤Ã¤ÆºÇ½é¤Ë¤ä¤ë¤³¤È¤Ï»þ´Ö»ØÄê¤Ç¤¹¡£½èÍýÆâÍƤ˽ñ¤¤¤¿¥³¥Þ¥ó¥É¤ò¤¤¤Ä¼Â¹Ô¤¹¤ë¤«¤ò»Ø¼¨¤·¤Æ¤ä¤ê¤Þ¤¹¡£Æñ¤·¤¤¤³¤È¤Ï¤¢¤ê¤Þ¤»¤ó¡¢HTML¤ÎDOMÍ×ÁǤòÁ´¤ÆÆɤ߹þ¤ó¤À»þÅÀ¡Ê²èÁü¥Õ¥¡¥¤¥ëÅù¤ÏÆɤ߹þ¤àÁ°¤ÎÃʳ¬¡Ë¤Ç¼Â¹Ô¤¹¤ë¡¢¤È¤¤¤¦¥³¥Þ¥ó¥É¡Öready¡×¤¬¤¢¤ê¤Þ¤¹¤Î¤Ç¤³¤ì¤ò»È¤¤¤Þ¤¹¡£
$(document).ready(function(){½èÍýÆâÍÆ});
¤¤¤¤Ê¤ê½Ð¤Æ¤¤¿¡Öfunction(){}¡×¤Ï¡¢¡Ð¡Ñ¤Ë½ñ¤«¤ì¤¿jQuery¥³¡¼¥É¤ò¼Â¹Ô¤¹¤ë¡¢¤È¤¤¤¦°ÕÌ£¤Ë¤Ê¤ê¤Þ¤¹¡£Ã±¤Ë½èÍýÂоݤËÂФ·¤Æ¡Ö¿§¤òÊѤ¨¤í¡×¤È¤«¡Ö¾Ã¤»¡×¤È¤«¤Î¥³¥Þ¥ó¥É¤ò¼Â¹Ô¤¹¤ë¤Î¤Ç¤Ï¤Ê¤¯¡¢¹¹¤Ë½èÍýÂоݤòºÙ¤«¤¯»ØÄꤷ¤Æ»Ø¼¨¤òÍ¿¤¨¤¿¤¤¤È¤¤Ï¤³¤Îfunction()¤ò»È¤¤¤Þ¤¹¡£
¤µ¤Æ¤³¤³¤Ç¡¢¤Ê¤ó¤È¤³¤³¤Ë½Ð¤Æ¤¤¿¤Î¡Ö(document).ready¡×¤Ï¾Êά²Äǽ¤Ê¤Î¤Ç¤¹¡£jQuery¤Þ¤¿¤Ï$¤Î¸å¤Ë¥³¥Þ¥ó¥É̵¤·¤Ç¡Ê¡Ë¤ò½ñ¤¯¤È¤½¤ì¤Ïready¥³¥Þ¥ó¥É¤ò»ØÄꤷ¤¿¤Î¤ÈƱ¤¸°ÕÌ£¤Ë¤Ê¤ê¤Þ¤¹¡£¤È¤¹¤ë¤È¡¢¤³¤¦¤Ê¤ê¤Þ¤¹¡£
$(function(){½èÍýÆâÍÆ});
¤³¤ì¤¬jQuery¤Î´ðËܹ½Ê¸¤Ç¡¢¤³¤Î¡Ð½èÍýÆâÍơѤÎÉôʬ¤ËÀèÄø¤Î¡Ö$(½èÍýÂоÝ).¥³¥Þ¥ó¥É(½èÍýÆâÍÆ)¡×¤Î·Á¼°¤Ç½èÍý¤ò½ñ¤¤¤Æ¤æ¤¯¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
³¤¤¤Æ¡¢º£²ó¤ÎjQuery¥³¡¼¥É¤ò½ñ¤¤¤Æ¤ß¤Þ¤¹¡£¤³¤Á¤é¤Ç¤¹¡£
$(function(){ $("a.tab").click(function () {
<!-- class="tab"¤Îa¥¿¥°¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¤È¤ -->
$(".active").removeClass("active");
<!-- class="active"¤«¤éacticve¤òºï½ü¤¹¤ë -->
$(this).addClass("active");
<!-- ¥¯¥ê¥Ã¥¯¤µ¤ì¤¿a¥¿¥°¤Ëclass="active"¤òÉÕÍ¿ -->
$(".content").hide();
<!-- ¥³¥ó¥Æ¥ó¥Ä¤ò°ìöÈóɽ¼¨ -->
var content_show = $(this).attr("title");
$("#"+content_show).show();
<!-- ¥¯¥ê¥Ã¥¯¤µ¤ì¤¿a¥¿¥°¤Îtitle°À¤ÈƱ¤¸idÍ×ÁǤΤߤòºÆɽ¼¨ -->
});
});
ÀèÄø¤Î$(function(){½èÍýÆâÍÆ})¤ÎÃæ¤Ë
$(“a.tab”).click(function(){½èÍýÆâÍÆ});
¤È¤¤¤¦Ê¸¤¬½ñ¤«¤ì¤Æ¤¤¤Þ¤¹¡£¤³¤ì¤Ï¡¢”a.tab”¤Ä¤Þ¤ê”tab”¤È¤¤¤¦¥¯¥é¥¹¤¬¤Ä¤±¤é¤ì¤¿<a>¥¿¥°¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¤È¤¤Ë½èÍýÆâÍƤò¼Â¹Ô¤»¤è¡¢¤È¤¤¤¦»ØÎá¤Ë¤Ê¤ê¤Þ¤¹¡£”a.tab”¤Î»ØÄê¤Î»ÅÊý¤Ïcss¤Ç¤Î»ØÄê¤Î»ÅÊý¤ÈƱ¤¸¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤Î¤Ç¡¢css¤òÆɤó¤À¤³¤È¤¬¤¢¤ì¤Ð¤Ê¤¸¤ß¤Î¤¢¤ë½ñ¤Êý¤À¤È»×¤¤¤Þ¤¹¡£
¤½¤·¤Æ¡¢¥¯¥ê¥Ã¥¯¤·¤¿¤È¤¤Î½èÍýÆâÍƤϡ¢¥³¥á¥ó¥È¤ò½ü¤¯¤ÈÁ´Éô¤Ç5¹Ô¤Î¥³¡¼¥É¤Ë¤Ê¤Ã¤Æ¤¤¤Þ¤¹¡£
ºÇ½é¤Î2¹Ô¤Ï¥¿¥Ö¤Î¿§¤òÊѤ¨¤ë»ØÎá¤Ç¤¹¡£¸å¤Ç½Ð¤Æ¤¤Þ¤¹¤¬¡¢css¤ÎÊý¤Ç¡¢¥¿¥Ö¤Î¿§¤ÏÁ´ÈÌ¥°¥ì¡¼¤Ç¡¢"active"¤È¤¤¤¦¥¯¥é¥¹¤¬Ã夤¤¿¥¿¥Ö¤À¤±Çò¤¯¤¹¤ë¡¢¤È¤¤¤¦»Ø¼¨¤¬½ñ¤¤¤Æ¤¢¤ê¤Þ¤¹¡£¤Ê¤Î¤ÇjQuery¤Ç¤Ï¥¿¥Ö¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¤È¤¤Ëactive¤È¤¤¤¦¥¯¥é¥¹¤òÉÕ¤±Âؤ¨¤ë¤À¤±¤Ç¥¿¥Ö¤Î¿§¤òÊѤ¨¤ë¤³¤È¤¬¤Ç¤¤ë¤Î¤Ç¤¹¡£¤³¤Îcss¤È¤Î¹ç¤ï¤»µ»¤Ï¤³¤ì¤«¤é¤è¤¯»È¤Ã¤Æ¤æ¤¯¤³¤È¤Ë¤Ê¤ë¤È»×¤¤¤Þ¤¹¤Î¤Ç³Ð¤¨¤Æ¤ª¤¤¤Æ¤¯¤À¤µ¤¤¡£ºÙ¤«¤¯Æɤó¤Ç¤¤¤¤Þ¤·¤ç¤¦¡£
$(".active").removeClass("active");
¤³¤Á¤é¤Ï½èÍýÂоݤ¬".active"¤Ä¤Þ¤êactive¤È¤¤¤¦¥¯¥é¥¹Á´È̤Ǥ¹¡£¤½¤ì¤Ë¤¿¤¤¤·removeClass¤Ç°ìöactive¤È¤¤¤¦¥¯¥é¥¹»Ø¼¨¤òÁ´¤Æ¼è¤ê½ü¤¤¤Æ¤¤¤Þ¤¹¡£¼è¤ê½ü¤¯¤Î¤Ï¥¯¥é¥¹¤Ë»Ø¼¨¤µ¤ì¤¿active¤Îʸ»ú¤À¤±¤Ç¤¹¡£¤³¤ì¤Ç°ìöÁ´¤Æ¤Î¥¿¥Ö¤¬¥°¥ì¡¼¤Ë¤Ê¤ê¤Þ¤¹¡£
$(this).addClass("active");
¤½¤·¤Æ¤³¤Á¤é¤Î½èÍýÂоݤϡÖthis¡×¡£¤³¤ì¤Ï¤³¤³¤Ç¤Ï¸½ºß¥¯¥ê¥Ã¥¯¤·¤¿<a>¥¿¥°¤È¤¤¤¦°ÕÌ£¤Ë¤Ê¤ê¤Þ¤¹¡£¤½¤³¤Ë¥¯¥é¥¹”active”¤òÄɲä·¤Þ¤¹¡£¤³¤ì¤Ç¥¯¥ê¥Ã¥¯¤·¤¿¥¿¥Ö¤¬Çò¤¯¤Ê¤ë¤ï¤±¤Ç¤¹¡£
¼¡¤Ï¥³¥ó¥Æ¥ó¥Ä¤Îɽ¼¨ÀÚ´¹¤¨¤Ç¤¹¡£¤Þ¤º¼¡¤Î1ʸ¤Ç”contents”¤È¤¤¤¦¥¯¥é¥¹¤Î¤Ä¤¤¤¿¥¿¥°¤ÎÃæ¿È¤ò°ìöÁ´¤ÆÈóɽ¼¨¤Ë¤·¤Þ¤¹¡£
$(".content").hide();
¤½¤·¤Æ¡¢¥Ý¥¤¥ó¥È¤Ï¼¡¤Î1¹Ô¤Ç¤¹¡£
var content_show = $(this).attr("title");
ºÇ½é¤Îvar¤Ï¡¢¼¡¤Î¡Öcontent_show¡×¤ÏÊÑ¿ô¤Ç¤¹¤è¡¢¤È¤¤¤¦Àë¸À¤Ç¤¹¡£ÊÑ¿ô¤ò1¤Äºî¤Ã¤¿¤ï¤±¤Ç¤¹¡£¤³¤³¤ÇÊÑ¿ô¤ËÆþ¤ì¤Æ¤¤¤ëÃͤǤ¹¤¬¡¢this¤ÏÀè¤Û¤É¤ÈƱ¤¸¥¯¥ê¥Ã¥¯¤·¤¿<a>¥¿¥°¤Ç¤¹¡£attr¤È¤¤¤¦¥³¥Þ¥ó¥É¤Ï¡Ö°ÀÃͤò¼è¤Ã¤Æ¤¤Ê¤µ¤¤¡×¤È¤¤¤¦¥³¥Þ¥ó¥É¤Ç¤¹¡£¸ÀÍդǽñ¤¯¤È¡¢¡Ö¥¯¥ê¥Ã¥¯¤·¤¿<a>¥¿¥°¤Îtitle°ÀÃͤò¼è¤Ã¤Æ¤¤Æcontent_show¤È¤¤¤¦ÊÑ¿ô¤ËÆþ¤ì¤Ê¤µ¤¤¡×¤È¤¤¤¦°ÕÌ£¤Ë¤Ê¤ê¤Þ¤¹¡£¼Â¤Ï¤³¤ì¤â¸å¤Ç½Ð¤Æ¤¤Þ¤¹¤¬¡¢¥¿¥Ö¤ÎÃæ¿È¤Î³Æ¥³¥ó¥Æ¥ó¥Ä¤Îid¤ÈÂбþ¤¹¤ë¥¿¥Ö¤Îtitle¤òƱ¤¸¤Ë¤·¤ÆÂбþ¤ò¼è¤Ã¤Æ¤¤¤Þ¤¹¡£¤Ä¤Þ¤ê¥¯¥ê¥Ã¥¯¤·¤¿<a>¥¿¥°¤Îtitle°À¤ò¸«¤ë¤³¤È¤Ç¡¢É½¼¨¤·¤¿¤¤¥³¥ó¥Æ¥ó¥Ä¤Îid¤¬È½¤ë»ÅÁȤߤˤ·¤Æ¤¢¤ë¤Î¤Ç¤¹¡£
¤È¤¤¤¦¤³¤È¤Ç¡¢ºÇ¸å¤Î1¹Ô¤Ç¤¹¡£
$("#"+content_show).show();
css¤Îʸˡ¤Ç¤Ï¡ô¤Ïid¤Î°ÕÌ£¤Ç¤·¤¿¡£ÀèÄø¥¿¥Ö¤ÎÃæ¿È¤Ï°ìöÁ´¤ÆÈóɽ¼¨¤Ë¤·¤Æ¤¢¤ê¤Þ¤·¤¿¤¬¡¢¤³¤Î°ìʸ¤Ç¡¢<a>¥¿¥°¤Îtitle¤ÈƱ¤¸id¤Î¥Ö¥í¥Ã¥¯¤Ï¤á¤Ç¤¿¤¯ºÆɽ¼¨¤µ¤ì¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
¢£HTML¥³¡¼¥É¤òµ½Ò¤¹¤ë
¼¡¤Ï¡¢jQuery¤ËÂбþ¤µ¤»¤ÆHTML¥³¡¼¥É¤òµ½Ò¤·¤Þ¤¹¡£
// ¥¿¥ÖÉô
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">jQuery</a></li>
// ºÇ½é¤Ë³«¤¤¤Æ¤ª¤¯¥¿¥Ö¤Ëclass="active"¤òÉÕÍ¿¤·¤Æ¤ª¤¤Þ¤¹¡£
<li><a href="#" title="content_2" class="tab">HTML</a></li>
<li><a href="#" title="content_3" class="tab">CSS</a></li>
</ul>
// ¥³¥ó¥Æ¥ó¥ÄÉô
<div id="content_1" class="content">
¥³¥ó¥Æ¥ó¥Ä£±
</div>
<div id="content_2" class="content">
¥³¥ó¥Æ¥ó¥Ä£²
</div>
<div id="content_2" class="content">
¥³¥ó¥Æ¥ó¥Ä£³
</div>
Â礤¯2¤Ä¤Î¥Ö¥í¥Ã¥¯¡¢¥¿¥ÖÉô¤È¥³¥ó¥Æ¥ó¥ÄÉô¤Ëʬ¤«¤ì¤Þ¤¹¡£
¥¿¥ÖÉô¤Î¥Ý¥¤¥ó¥È¤Ï¡¢4¤Ä¡¢
- ³Æ¥³¥ó¥Æ¥ó¥Ä¤Ø¤Î¥ê¥ó¥¯¤ò<a>¥¿¥°¤Ç½ñ¤¯¡Êhref=”#”)
- class=”tab”¤òÍ¿¤¨¤ë
- ¶èÊ̤¹¤ëid¤òtitle¤Ë½ñ¤¯¤³¤È
- ºÇ½é¤Ëɽ¼¨¤·¤Æ¤ª¤¯¥¿¥Ö¤Ëclass=”active”¤òÉÕ¤±¤ë¤³¤È¡£
¤¢¤È¤Ï<ul><li>¤Ç½ñ¤¤¤Æ¤â¤¤¤¤¤·¡¢²¿¤Ç½ñ¤¤¤Æ¤â¹½¤¤¤Þ¤»¤ó¡£
¥³¥ó¥Æ¥ó¥ÄÉô¤Ï¤â¤Ã¤È´Êñ
- class=”content”¤òÍ¿¤¨¤ë
- ÀèÄø<a>¥¿¥°¤Î¥¿¥¤¥È¥ë¤ËÃ失¤¿Ì¾Á°¤ÈƱ¤¸¤â¤Î¤òid¤Ë¤¹¤ë
¥¿¥ÖÉô¤Î<a>¥¿¥°¤Îtitle¤È¥³¥ó¥Æ¥ó¥ÄÉô¤Îid¤òƱ¤¸¤Ë¤·¤Æ¤ä¤ë¤È¤³¤í¤¬¥ß¥½¤Ç¤¹¡£
¢£CSS¤òµ½Ò¤¹¤ë
¤¢¤È¤ÏCSS¤Ç¸«¤¿ÌܤòÀ°¤¨¤¿¤é½ªÎ»¤Ç¤¹¡£
// Âç³°¤ÎÏȤÈÇØ·Ê
.tabbed_area {
width:640px;
border:1px solid #111;
background-color:#ccc;
padding:8px;
}
// ¥¿¥Ö¥»¥Ã¥È¤Î¥¨¥ê¥¢
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
// ¸Ä¡¹¤Î¥¿¥Ö¤ò²£¤ËÇÛÃÖ
ul.tabs li {
list-style:none;
display:inline;
}
// ¸Ä¡¹¤Î¥¿¥Ö¤ÎÀßÄê¡£¿§¤ÏÈó¥¢¥¯¥Æ¥£¥Ö¤Î¾ì¹ç
ul.tabs li a {
background-color:#666;
color:#fff;
padding:8px 14px 8px 14px;
text-decoration:none;
border:1px solid #222;
border-bottom: 0px
}
// ¥¿¥Ö¤Ë¥Þ¥¦¥¹¤ò¾è¤»¤¿»þ¤Î¿§¤ÎÊѲ½
ul.tabs li a:hover {
background-color:#222;
border-color:#222;
}
// ¥¢¥¯¥Æ¥£¥Ö¤Ê¥¿¥Ö¤Î¿§
ul.tabs li a.active {
background-color:#fff;
color:#222;
border:1px solid #222;
border-bottom: 1px solid #fff;
}
// ¥³¥ó¥Æ¥ó¥ÄÏȤÎÂκÛ
.content {
background-color:#fff;
padding:10px;
border:1px solid #444;
}
// ºÇ½é¤ËÈóɽ¼¨¤È¤¹¤ë¥³¥ó¥Æ¥ó¥Ä¤Î»ØÄê
#content_2, #content_3 { display:none; }
¥Ý¥¤¥ó¥È¤ÏºÇ¸å¤ÎÈóɽ¼¨¥³¥ó¥Æ¥ó¥Ä¤Î»ØÄê¤Ç¤¹¡£ÀèÄøHTML¤Ç¡¢ºÇ½é¤Ë”active”¤Ë¤¹¤ë¥¿¥Ö¤ò»ØÄꤷ¤Þ¤·¤¿¤¬¡¢¤³¤³¤Ç¤ÏÈóɽ¼¨¤Ë¤¹¤ëÊý¤Î¥³¥ó¥Æ¥ó¥Ä¤ò»ØÄꤷ¤Ædisplay:none¤òÍ¿¤¨¤Æ¤¤¤Þ¤¹¡£
¢£¤Þ¤È¤á
°Ê¾å¤ÇÁ´¤Æ¤Ç¤¹¡£jQuery¼«ÂΤϴÊñ¤Ç¤â¡¢HTML¡¢CSS¤Þ¤Ç´Þ¤á¤ë¤È¤½¤ì¤Ê¤ê¤Î¥Ü¥ê¥å¡¼¥à¤Ë¤Ê¤ê¤Þ¤·¤¿¤Î¤Ç¡¢ºÇ½é¤Ï¤³¤Î¥Ú¡¼¥¸¤Î¥³¡¼¥É¤ò¥³¥Ô¥Ú¤·¤Æºî¤Ã¤Æ¤ß¤Æ¤¯¤À¤µ¤¤¡£¾å¼ê¤¯Æ°¤¤¤¿¤È¤¤Î´¶Æ°¤Ï³ÊÊ̤Ǥ¹¡ù
¼¡²ó¤«¤é¤Ï¤ªµ¤¤ËÆþ¤ê¤ÎjQuery¡Ö¥×¥é¥°¥¤¥ó¡×¤ò¾Ò²ð¤·¤Æ¤¤¤¤¿¤¤¤È»×¤¤¤Þ¤¹¡£
- 2014.05.14 Wednesday
- ¥Ú¡¼¥Ñ¡¼¥¯¥é¥Õ¥È
- 06:06
- comments(0)
- -
- -
- by ¤Æ¤Á¤¯¤ó