WebDesigning 2007年4月号掲載のサンプルです。サンプルスクリプトは掲載されたものとは若干異なります。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
div {
font-size:12pt;
width:320px;
border:1px solid black;
background-color:#eee;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(function(){
$("#content").load("content.html");
});
// --></script>
</head>
<body>
<h1>WebDesigning目次</h1>
<div id="content"></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
.tab1, .tab2, .tab3 {
font-size:12pt;
font-weight:900;
width:200px;
border:1px solid black;
background-color:#eee;
}
ul {
margin-top:0px;
}
li {
font-size:9pt;
font-weight:100;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(function(){
$("ul li").hide();
$(".tab1").click(function(){
$(".tab1 ul li").toggle();
});
$(".tab2").click(function(){
$(".tab2 ul li").toggle();
});
$(".tab3").click(function(){
$(".tab3 ul li").toggle();
});
});
// --></script>
</head>
<body>
<h1>WebDesigning目次</h1>
<div class="tab1">特集記事
<ul>
<li>標準技術とは？</li>
<li>(X)HTMLの今。</li>
<li>スタイルシートの現状と実装</li>
<li>JavaScriptとAjaxの現実</li>
<li>今後の展開は？</li>
</ul>
</div>
<div class="tab2">Webデザイナー白書
<ul>
<li>労働時間は？</li>
<li>使用制作ソフトは？</li>
<li>Flashの利用度は？</li>
<li>チェックするブラウザは？</li>
<li>デザイナーのひとりごと</li>
</ul>
</div>
<div class="tab3">連載記事
<ul>
<li>モノサシに目印<br>
<li>デザインにできること<br>
<li>Ajaxハジメマシタ<br>
</ul>
</div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
.tab1, .tab2, .tab3 {
font-size:12pt;
font-weight:900;
width:200px;
border:1px solid black;
background-color:#eee;
}
ul {
margin-top:0px;
}
li {
font-size:9pt;
font-weight:100;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(function(){
$("ul li").hide();
$(".tab1").click(function(){
$(".tab1 ul li").slideToggle("slow", null);
});
$(".tab2").click(function(){
$(".tab2 ul li").slideToggle("normal", null);
});
$(".tab3").click(function(){
$(".tab3 ul li").slideToggle("fast", null);
});
});
// --></script>
</head>
<body>
<h1>WebDesigning目次</h1>
<div class="tab1">特集記事
<ul>
<li>標準技術とは？</li>
<li>(X)HTMLの今。</li>
<li>スタイルシートの現状と実装</li>
<li>JavaScriptとAjaxの現実</li>
<li>今後の展開は？</li>
</ul>
</div>
<div class="tab2">Webデザイナー白書
<ul>
<li>労働時間は？</li>
<li>使用制作ソフトは？</li>
<li>Flashの利用度は？</li>
<li>チェックするブラウザは？</li>
<li>デザイナーのひとりごと</li>
</ul>
</div>
<div class="tab3">連載記事
<ul>
<li>モノサシに目印<br>
<li>デザインにできること<br>
<li>Ajaxハジメマシタ<br>
</ul>
</div>
</body>
</html>