为什么我的Radio先选中一个,再选中另一个的时候,之前的checked不会取消呢 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-06-01 19:41:32 1608

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;
}
前端开发
分享到
取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:23:44
    <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就会在同名的一个组里保持一个或者零个被选中。

    改成这样:

    <li>
        <input type="radio" name="tag" id="tab-control-1" checked="checked">
        <a href="#tab-item-1">标签一</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-2">
        <a href="#tab-item-2">标签二</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-3">
        <a href="#tab-item-3">标签三</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-4">
        <a href="#tab-item-4">标签四</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-5">
        <a href="#tab-item-5">标签五</a>
    </li>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程