tag标签怎么转换成html,HTML模拟tag标签

自己尝试着用HTML+css模拟一个tag标签的效果

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;

}

//下面两个方法是为了实现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();

}

无标题文档

Simple Tab 1

Simple Tab 2

Simple Tab 3

simple1 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

simple2

simple3

备注：在css样式中，dl.tabs——标签和类属性之间没有空格，否则就不能准确的定位上去了。

img{display:block;} 表示将img标签，也就是图片标签变成一个区块，这样img标签具有了区块的属性。