实现点击不同的按钮显示不同的内容【同一页面】web

一，需求

有一个页面，里面显示所有的作品，作品状态分为：已评分/未评分。
现需要在页面上面增加一个按钮：全部，已评分，为评分。每点一个不同的按钮怎么就要显示不同的内容。

二，猜想

使用一个js来控制不同的显示内容。每一个div设置一个不同的id。
当点击show1()显示div《id=1》的内容，如此，设置三个即可。
设置一个列表，写下如下内容：

<td>
        <a href="#" type="radio" name="sex"  onclick="show1()">全部</a>
    </td>
    <td>
        <a href="#" type="radio" name="sex"  onclick="show2()">未评价</a>
    </td>
    <td>
        <a href="#" type="radio" name="sex"  onclick="show3()">已评价</a>
    </td>

之后咱们写下一个js控制器：

<script>
function show1(){
    
    
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
document.getElementById("div3").style.display="none";
};
function show2()
{
    
    
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
document.getElementById("div3").style.display="none";
}
function show3()
{
    
    
document.getElementById("div3").style.display="block";
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="none";
}
</script>

代码解释：
当show1()打开时，关闭里面的div2和div3，打开div1。
下面同上的原理。

三，尝试实现

尝试实现，将之前的一个div复制粘贴为三个如下：

<div class="container admin" id="div1">
</div>
<div class="container admin" id="div1">
</div>
<div class="container admin" id="div3">
</div>

四，启动项目观察效果

成功实现需求：
未评价按钮：

已评价按钮：

心得：
<div style="display: block" id="teachers"> div本身就是块元素，再写display：block就多余了，所以此处的style="display: block"可以删除，不影响结果，此处写上的原因是为了工整。其余地方不能删除。

完整模板：

<td>
        <a href="#" type="radio" name="sex"  onclick="show1()">全部</a>
    </td>
    <td>
        <a href="#" type="radio" name="sex"  onclick="show2()">未评价</a>
    </td>
    <td>
        <a href="#" type="radio" name="sex"  onclick="show3()">已评价</a>
    </td>
 
 <div class="container admin" id="div1">
</div>
<div class="container admin" id="div1">
</div>
<div class="container admin" id="div3">
</div>

<script>
function show1(){
    
    
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
document.getElementById("div3").style.display="none";
};
function show2()
{
    
    
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
document.getElementById("div3").style.display="none";
}
function show3()
{
    
    
document.getElementById("div3").style.display="block";
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="none";
}
</script>