打卡代码第2天

最新推荐文章于 2024-02-22 13:34:34 发布

野比二狗

最新推荐文章于 2024-02-22 13:34:34 发布

阅读量75

点赞数

分类专栏：笔记 js 文章标签： css html5 html jquery java

本文链接：https://blog.csdn.net/weixin_58302046/article/details/120515615

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

图片不知道怎么放上去。~~~~~~~~~~~~~

<style>

padding:0px;

margin:0px;

}

ul,li{

list-style:none;

}

img{

border:0px;

}

.title{

margin:0 auto;

width:400px;

height:38px;

}

.title li{

float: left;

width:25%;

line-height:38px;

text-align:center;

font-size:18;

font-weight:bold;

letter-spacing:2px;

cursor:pointer;

}

.content{

width: 400px;

height:320px;

margin:0 auto

}

.content .con_item{

display: none;

}

.content .con_tiem img{

width: 160px;

}

.content .active{

display:block;

}

</style>

</head>

<body>

</ul>

</div>

</div>

</div>

</div>

滑过标题的时候显示对应内容

1.处理标题对应内容的显示

a.给每一个标题绑定鼠标滑过事件

b.首先将所有内容的标签类名设置为con_item

c.将对应标题的内容添加上active类名

function tab(index){

//获取标题列表的元素

var titList = document.getElementsByClassName('tit_item')

//获取内容列表的元素

var conList = document.getElementsByClassName('con_item')

//将所有内容的标签类名设置为con_item

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

conList[i].className = 'con_item'

titList[i].style.color='#000'

}

conList[index].className +='active'

totList[index].style.color='green'

//滑过的时候，在前边添加中国2个字

}

</script>

野比二狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录