HTMLシミュレーションのタグ
3476 ワード
自分でHTML+cssを使って一つのタグの効果をシミュレーションしてみます。
img[display:block]は、[img]タグ、つまり画像ラベルをブロックに変更するという意味で、ブロックの属性を持つラベルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<style type="text/css">
dl.tabs{
border-bottom: solid 1px #ddd;
height:30px;
border-color:#555555;
border-bottom-color:#DDDDDD;
}
dl.tabs dd{
float:left;
}
dl.tabs dd a{
text-decoration:none;
border: solid 1px #ddd;
height: 29px;
color: #555;
background: #eee;
display: block;
width: auto;
}
dl.tabs dd a.active{
background: none repeat scroll 0 0 #FFFFFF;
border-width: 1px 1px 0;
height: 30px;
}
#parent{
width:700px;
}
.son{
width:700px;
height:20px;
margin-left:20px;
}
</style>
<script type="text/javascript">
// tab
$(document).ready(
function(){
$("dd a").each(function(){
$(this).bind("click",function(){
clearClass();
$(this).addClass("active");
var use_id = $(this).attr("id");
switch(use_id){
case "simple1":
$("#simple1_id").show();
break;
case "simple2":
$("#simple2_id").show();
break;
case "simple3":
$("#simple3_id").show();
break;
}
});
});
}
);
function clearClass(){
$("#simple1").removeClass();
$("#simple2").removeClass();
$("#simple3").removeClass();
$("#simple1_id").hide();
$("#simple2_id").hide();
$("#simple3_id").hide();
}
</script>
<title> </title>
</head>
<body>
<!-- tag -->
<div id="parent">
<dl class="tabs"><!-- a display: block; ， dl -->
<dd><a class="active" href="#simple1" id="simple1">Simple Tab 1</a></dd>
<dd><a href="#simple2" class="" id="simple2">Simple Tab 2</a></dd>
<dd><a href="#simple3" class="" id="simple3">Simple Tab 3</a></dd>
</dl>
<div class="son" id="simple1_id">
simple1 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
<div class="son" id="simple2_id" style="display:none">
simple2
</div>
<div class="son" id="simple3_id" style="display:none">
simple3
</div>
</div>
<p>
： css ，dl.tabs—— ， 。
</body>
</html>
img[display:block]は、[img]タグ、つまり画像ラベルをブロックに変更するという意味で、ブロックの属性を持つラベルです。