小菜鸟们冲鸭!!
由于本人是个小菜鸟,刚起步,所以写下遇到的点点滴滴,希望能给同是小菜鸟的大家带去一定的帮助吧!
一、问题描述
接上一篇文章,效果实现了,但是发现按钮不好看,于是要求改成layui的按钮但是发现换成layui按钮时,对应的时间却失效了。
1、原来的内容:(大家可以去这个地方把代码复制进去——https://www.runoob.com/runcode——测试一下原始效果)
<html>
<style>
.project-choose,
.message-choose{
diasplay: flex;
justify-content: space-between;
}
.project-choose-list,
.message-choose-list{
width: 350px;
float: left;
margin: 52px
}
.project-item,
.message-item{
height: 200px;
margin-right: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.project-item-choose,
.message-item-unchoose{
border:1px solid red;
}
</style>
<body>
<div class="project-choose">
<div class="project-choose-list">
<input type="radio" onclick="show_project(0)" lay-filter="checkbox-project" name="choose" />
<div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<input type="radio" onclick="show_project(1)" lay-filter="checkbox-project" name="choose" />
<div class="project-item">
我是第二个div
</div>
</div>
<div class="project-choose-list">
<input type="radio" onclick="show_project(2)" lay-filter="checkbox-project" name="choose" />
<div class="project-item">
我是第三个div
</div>
</div>
</div>
</body>
<script>
function show_project(id){
var radio = document.getElementsByClassName('project-item')
for(var i=0;i<radio.length;i++){
if(i == id){
radio[i].className ='project-item project-item-choose ' //定义被选中的div的样子
}else{
radio[i].className='project-item ' //没有被选中的div的样式,如果相加其他的样式只需要在上面的css定义一个样式,然后加入这里面来。
}
}
}
</script>
</h