用记事本写html设置div,用记事本DIV+CSS编写好后肿么看效果

!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=utf-8 /

script language=javascript src=jquery.js/script

script

$(document).ready(function(){

$(#top).find(div).each(function(i,n){

$(this).click(function(){

$(#bottom).find(table).each(function(){

if($(this).css(display)==block){

$(this).css(display,none);

}

});

$(#bottom table:eq(+i+)).css(display,block);

});

});

});

/script

title服装/title

style

.top { width:auto;

height:30px;

margin-bottom:2px;

}

.bottom { width:300px;

height:194px;

margin-left:10px;

}

.choice { width:60px;

height:30px;

line-height:30px;

text-align:center;

border:#CCCCCC 1px solid;

float:left;

margin-left:10px;

}

/style

/head

body

div class=top id=top

div class=choice id=women女装/div

div class=choice id=man男装/div

div class=choice id=child童装/div

/div

div class=bottom id=bottom

table width=300 border=1 style=display:block;

tr

td高级成衣/td

td高级成衣/td

/tr

tr

td高级成衣/td

td高级成衣/td

/tr

tr

td高级成衣/td

td高级成衣/td

/tr

tr

td高级成衣/td

td高级成衣/td

/tr

tr

td高级成衣/td

td高级成衣/td

/tr

tr

td高级成衣/td

td高级成衣/td

/tr

tr

td高级成衣/td

td高级成衣/td

/tr

/table

table width=300 border=1 style=display:none;

tr

td男装/td

td男装/td

/tr

tr

td男装/td

td男装/td

/tr

tr

td男装/td

td男装/td

/tr

tr

td男装/td

td男装/td

/tr

tr

td男装/td

td男装/td

/tr

tr

td男装/td

td男装/td

/tr

tr

td男装/td

td男装/td

/tr

/table

table width=300 border=1 style=display:none;

tr

td童装/td

td童装/td

/tr

tr

td童装/td

td童装/td

/tr

tr

td童装/td

td童装/td

/tr

tr

td童装/td

td童装/td

/tr

tr

td童装/td

td童装/td

/tr

tr

td童装/td

td童装/td

/tr

tr

td童装/td

td童装/td

/tr

/table

/div

/body

/div

/html

单纯css是无法做到的，我这个是用jquery写的，你测试的时候下载一个jquery.js

取消

评论