您的位置：首页 > 其它

如何通过一组单选按钮控制来控制对应的一组div，就是点击按钮对应的div进行改变，类似于div互斥的样子！（小菜鸟入门小白教程）

2020-01-13 16:50 337 查看

小菜鸟们冲鸭！！

由于本人是个小菜鸟，刚起步，所以写下遇到的点点滴滴，希望能给同是小菜鸟的大家带去一定的帮助吧！

一.问题描述

通过一组单选按钮来控制一组div变化。就比如有三个单选按钮，然后三个div，一个按钮关联一个div，当我点击按钮时对应的div进行变化，然后点另外的一个按钮，它对应的div变化，当前选中的恢复。

 

二、解决办法

1、首先在一个div里面定义三个小的div，用来转按钮和对应的div。

[code]<div class="project-choose">
<div class="project-choose-list">
<input type="radio"  οnclick="show_project(0)"  lay-filter="checkbox-project" name="choose"  />
<div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<input type="radio"  οnclick="show_project(1)"  lay-filter="checkbox-project" name="choose"   />
<div class="project-item">
我是第二个div
</div>
</div>
<div class="project-choose-list">
<input type="radio" οnclick="show_project(2)"  lay-filter="checkbox-project" name="choose"   />>
<div class="project-item">
我是第三个div
</div>
</div>
</div>

2.给div写上变化前和变化后的css样式

[code]<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>

3.给div写上js控制方法

[code]<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 '
}else{
radio[i].className='project-item  '
}
}
}
</script>

4.整体代码，大家可以去这个地方把代码复制进去——https://www.runoob.com/runcode——测试一下。

[code]<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"  οnclick="show_project(0)"  lay-filter="checkbox-project" name="choose"  />
<div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<input type="radio"  οnclick="show_project(1)"  lay-filter="checkbox-project" name="choose"   />
<div class="project-item">
我是第二个div
</div>
</div>
<div class="project-choose-list">
<input type="radio" οnclick="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>
</html>

 

 

又是收获满满的一周，冲鸭！

  • 点赞
  • 收藏
  • 分享
  • 文章举报
one一piece 发布了6 篇原创文章 · 获赞 0 · 访问量 2321 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航