为什么我的Radio先选中一个，再选中另一个的时候，之前的checked不会取消呢

screenshot
为什么我的Radio先选中一个，再选中另一个的时候，之前的checked不会取消呢

这里是html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wapper">
        <div class="tabs">
            <div class="tab-title">
                <ul>
                    <li>
                        <input type="radio" id="tab-control-1" checked="checked">
                        <a href="#tab-item-1">标签一</a>
                    </li>
                    <li>
                        <input type="radio" id="tab-control-2">
                        <a href="#tab-item-2">标签二</a>
                    </li>
                    <li>
                        <input type="radio" id="tab-control-3">
                        <a href="#tab-item-3">标签三</a>
                    </li>
                    <li>
                        <input type="radio" id="tab-control-4">

css:

/* CSS Reset */
* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

body {
    background: #3498DB;
}

a {
    color: #000;
    text-decoration: none;
}

/* Tabs Start */

#wapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 200px;
}

.tabs {
    background: #fff;
    min-height: 400px;
    width: 100%;
    overflow: hidden;
}

.tab-title {
    line-height: 60px;
    overflow: hidden;
}

.tab-title ul li{
    cursor: pointer;
    float: left;
    width: 20%;
    height: 60px;
    position: relative;
    text-align: center;
}

.tab-title input {
    opacity: 0.5;
    position: absolute;
    z-index: 99;
}

.tab-title input,
.tab-title a {
    display: block;
    width: 100%;
    height: 60px;
}

.tab-title input:checked + a {
    background: #fff;
}

.tab-title ul li a {
    background: #f0f0f0;
    z-index: 9;
}

.tab-content {
    padding: 20px;
}

<li> <input type="radio" id="tab-control-1" checked="checked"> <a href="#tab-item-1">标签一</a> </li> <li> <input type="radio" id="tab-control-2"> <a href="#tab-item-2">标签二</a> </li> <li> <input type="radio" id="tab-control-3"> <a href="#tab-item-3">标签三</a> </li> <li> <input type="radio" id="tab-control-4"> <a href="#tab-item-4">标签四</a> </li> <li> <input type="radio" id="tab-control-5"> <a href="#tab-item-5">标签五</a> </li>

为什么我的Radio先选中一个，再选中另一个的时候，之前的checked不会取消呢

相关文章

相关电子书