studio-benkei

jQuery_autoの紹介です。今はダウンロードできないみたいです。
php happy lifeさんが覚書していたので、使わせてもらいました。
サイト → jQuery_autoが入手できない？

jQuery_autoはjQueryのプラグインのため、実装にはjquery.jsが必要です。

今回はいつも参考にさせて頂いているCSS HappyLifeさんのソースをDLしました。
よくある質問っぽいののjQueryを使ったサンプル

設定 ▼

          <script src="jquery.js" type="text/javascript"></script>
          <script src="jquery_auto.js" type="text/javascript"></script>
          

HTML ▼

<div class="tabContainer">
  <ul class="tabMenu">
    <li id="item01"><a href="#item01_area" title="写真1">写真1</a></li>
    <li id="item02"><a href="#item02_area" title="写真2">写真2</a></li>
    <li id="item03"><a href="#item03_area" title="写真3">写真3</a></li>
  </ul>
  <dl id="item01_area">
    <dt>神戸市立六甲山牧場で撮影しました。</dt>
    <dd><p><img src="pict21L.jpg" alt="ブタの写真" width="400" height="300" /><br />
    撮影場所 → <a href="photo/pasture.html">神戸市立六甲山牧場</a></p></dd>
    <dt>花とアリ</dt>
    <dd><p><img src="pict6L.jpg" alt="花とアリ" width="400" height="300" /><br />
    撮影場所 → <a href="photo/flower.html">花と野菜</a></p></dd>
    </dl>
    <dl id="item02_area">
    <dt>花</dt>
    <dd><p><img src="pict0L.jpg" alt="花" width="400" height="300" /><br />
     撮影場所 → <a href="photo/flower.html">花と野菜</a></p></dd>
    <dt>コアラ</dt>
    <dd><p><img src="pict11L.jpg" alt="コアラ" width="400" height="300" /><br />
    撮影場所 → <a href="photo/awaji.html">淡路島</a></p></dd>
    </dl>
    <dl id="item03_area">
    <dt>リスザル</dt>
    <dd><p><img src="pict14L.jpg" alt="リスザル" width="400" height="300" /><br />
    撮影場所 → <a href="photo/awaji.html">淡路島</a></p></dd>
    <dt>鶏</dt>
    <dd><p><img src="pict13L.jpg" alt="鶏" width="400" height="300" /><br />
    撮影場所 → <a href="photo/awaji.html">淡路島</a></p></dd>
  </dl>
</div>
          

CSS ▼

.tabContainer {
	width: 500px;
  margin:20px auto;
  padding-top:2px;
  border:1px solid #222;
}

.tabContainer ul.tabMenu li {
	float: left;
	margin-right: 5px;
	padding: 0;
	position: relative;
	letter-spacing: .1em;
}

.tabContainer ul.tabMenu li a {
	display: block;
	float: left;
	padding: 5px 10px;
	color: #999;
	text-decoration: none;
	background-color: #000000;
	border-bottom: 1px solid #000;
}

.tabContainer ul.tabMenu li.active a {
	position: relative;
	top: 3px;
	color: #000;
}

.tabContainer ul.tabMenu li a:hover {
	color: #000;
}

.tabContainer dl {
	clear: both;
	width: 470px;
	padding: 15px;
	background-color: #000000;
	border-top: 1px solid #FFFFFF;
}

.tabContainer dl dt {
	margin: 0 0 5px;
	padding-left: 25px;
	font-weight: bold;
	background-image: url(../../../img/item/icon3.gif);
	background-repeat: no-repeat;
	background-position: 0.6em 0.3em;
}

.tabContainer dl dd {
	display: none;
	margin-bottom: 15px;
	padding: 0 10px 0 25px;
	border-bottom: 1px dotted #CCC;
}