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

最新推荐文章于 2021-12-04 11:38:25 发布

one一piece

最新推荐文章于 2021-12-04 11:38:25 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/H_ONE_PIECE/article/details/100069423

这篇博客适合初学者，作者分享了如何使用单选按钮控制div显示和隐藏的问题。详细介绍了问题描述和解决步骤，包括定义div、设置CSS样式以及编写JS控制方法。提供了一个在线代码测试平台的链接，方便读者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小菜鸟们冲鸭！！

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

一.问题描述

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

二、解决办法

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

<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>

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

<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控制方法

<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——测试一下。

<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>
</html>

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