今日完成：

完成了任务十的部分页面

橙色进度条和按钮都不使用切图的方式：

用三个div可以拼凑一个进度段

<div class="step-icon">
    <div class="line-coin coin-finish">
    </div>
    <div class="circle-coin coin-finish">
        1
    </div>
    <div class="line-coin coin-finish"></div>
</div>

div.step-icon {
    display: flex;
    align-items: center;
    color: #ffffff;
}
div.circle-coin {
    text-align: center;
    line-height: 24px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    font-size: 14px;
}
div.line-coin {
    width: 69px;
    height: 5px;
    border-radius: 4%;
}

一组单选按钮只能同时选中一个：

这个使用js处理起来还是比较简单的：

给四个div都设置同一点击事件divfunction，并且设置id.function需要传递自身参数，后面点击事件中需要靠对象的id来判断是哪个按钮点击的。

<div id="1" class="circle" onclick="divfunction(this)"></div>
<span style="width: 100px">对口箱</span>
</div>
</div>

<div class="one-contain">
<div class="style-content-one">
<div  id="2" class="circle" onclick="divfunction(this)"></div>
<span style="width: 100px">对口箱</span>
</div>
</div>

<div class="one-contain">
<div class="style-content-one">
<div id="3" class="circle" onclick="divfunction(this)"></div>
<span style="width: 100px">对口箱</span>
</div>
</div>

<div class="one-contain">
<div class="style-content-one">
<div id="4" class="circle" onclick="divfunction(this)"></div>
<span style="width: 100px">对口箱</span>
</div>
</div>

</div>

<script>
    function divfunction(obj)  {
         var tags =  document.getElementsByClassName("annulus");

         for (var i=0;i<tags.length;i++){
             tags[i].className="circle";
         }

        document.getElementById(obj.id).className="annulus";
    }


</script>

js方法中首先获取类为”annlus“的对象数组，也就是已经被点击的div状态。（正常情况下这个数组中只有一个对象）

然后将对象的类换为“circle”,也就是未点击状态。

最后将发起点击事件的这个对象（通过this.id）的状态变成已点击。

div.annulus {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    border: 7px solid #1d7ad9;
    margin-right: 17px;
}

div.circle{
    display: inline-block;
    width:16px;
    height: 16px;
    border-radius: 100%;
    border: 1px solid #d6d6d6;
    margin-right: 17px;
}

还有一种情景没有考虑进去，就是当一个选项已经被选中，并且状态改变了。再次点击的话，应该是取消选中

状态。

再改一下js方法：

if (document.getElementById(obj.id).className=="annulus"){
    document.getElementById(obj.id).className="circle"
}else {
    document.getElementById(obj.id).className="annulus";
}

加一个判断条件，如果这个选项已被选中（也就是className="annulus"）,那就取消选中的状态（“circle”）

如果没被选中，就和上面的一样，状态改变为选中就行了。

然后测了一下，不行。再次点击选中状态不会取消。

看下js代码，原来是每次点击事件发起后，js方法都会先将所有的选中对象进行清除。

然后再进行判断的话，那肯定不行。

整个流程是：再次点击之后，点击的选项状态会先取消，然后又被选中。

所以在开始清除所有选中状态时，需要先判断一下，数组中的对象是否是点击事件的发起者。

如果是，那就不做操作，如果不是，那再清除。

js完整代码：

function divfunction(obj)  {
     var tags =  document.getElementsByClassName("annulus");

    for (var i = 0; i < tags.length; i++) {
        if (tags[i].id == obj.id) {

        } else {
            tags[i].className = "circle";
        }
    }

     if (document.getElementById(obj.id).className=="annulus"){
         document.getElementById(obj.id).className="circle"
     }else {
         document.getElementById(obj.id).className="annulus";
     }

}

效果:

明日计划：

修改任务七pc排版问题。

完成任务十。

遇到的问题：

任务七的布局适配问题搞不定啊

不知道问题出在哪了  

收获：

学习使用js来改变元素的类名。

通过参数传递来判断事件发起对象。