怎么用dreamwere做,怎么做类别的显示隐藏,就像这种

发布网友发布时间：2022-05-13 07:56

共4个回答

热心网友时间：2023-07-28 22:15

效果是上面图片那样的，代码像下面写的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

ul,li,p{

margin:0;

padding:0;

list-style-type:none;}

ul{

height:50px;}

li{

width:100px;

height:50px;

float:left;

text-align:center;

line-height:50px;

background:#999;

border-top:1px dashed #d8d8d8;

}

.active{

background:#FFF;

border-top:2px solid #F90;

border-left:1px solid #CCC;}

#tebie{

border-right:1px solid #d8d8d8;}

#box div{

width:200px;

height:220px;

border-right:1px solid #d8d8d8;

border-bottom:1px solid #d8d8d8;

border-left:1px solid #d8d8d8;

display:none;

margin-top:-20px;

clear:both;

}

#box div p {

padding-top: 10px;

margin-left: 20px;

line-height:25px;

}

</style>

window.onload=function ()

{

var oBox=document.getElementById('box');

var oUl=document.getElementById('nav');

var aLi=oUl.getElementsByTagName('li');

var aDiv=oBox.getElementsByTagName('div');

for(var i=0;i<aLi.length;i++)

{

aLi[i].index=i;

aLi[i].onclick=function ()

{

for(var i=0;i<aLi.length;i++)

{

aLi[i].className='';

aDiv[i].style.display='none';

}

this.className='active';

aDiv[this.index].style.display='block';

};

}

};

</script>

</head>

<body>

</ul>

[活动]融易融春游基金..<br/>

[活动]融易融春游基金..</p>

</div>

<div>

<p>

[公告]3月3日0点到3月1<br/>

[公告]3月3日0点到3月1</p>

</div>

</body>

</html>

热心网友时间：2023-07-28 22:16

tab选项卡滑动，用divcss和js

热心网友时间：2023-07-28 22:16

这个叫选项卡，不谢追问so，怎么做，没问你叫什么

追答百度搜jquery选项卡，一大把完整例子的

热心网友时间：2023-07-28 22:17

tab，，，，，好多插件，，，，