单击标签时显示弹出窗口，并根据标签更改弹出内容

Question

点击#nav 中的任何标签时会显示一个弹出窗口；但是，我希望根据单击的标签显示不同的内容。目前，不同的弹出内容 div 都将仅基于 CSS 隐藏或显示（例如，我的 jQuery 选择器可能是错误的）。我该如何解决？添加/删除活动类而不是使用无线电设置会更好吗？谢谢！

UPDATE1：修复了 cmets 指示的错字后，我现在的问题似乎是没有显示其他未经检查的无线电目标。

UPDATE2：添加$('[id^="c-"]').hide(); 似乎只能正确显示一个目标 div；但是，它似乎需要两次点击才能工作。 （单击将显示弹出窗口的先前状态，例如，如果尚未单击任何内容，则为空，或者如果其标签是最后一次单击的，则为 #c-ask。）

HTML：

<input hidden type="radio" id="ask" name="popinfo"/>
<input hidden type="radio" id="sub" name="popinfo"/>
<input hidden type="radio" id="mnu" name="popinfo"/>
<div id="fade">
    <div id="popup">
        <div id="c-ask">ask</div>
        <div id="c-sub">sub</div>
        <div id="c-mnu">mnu</div>
    </div>
</div>
<section id="splash">
    <div class="info">
        // 
    </div>
    <div id="nav">
        <i class="fa fa-home"></i>
        <label for="ask"><i class="fa fa-envelope"></i></label>
        <i class="fa fa-user"></i>
        <label for="sub"><i class="fas fa-edit"></i></label>
        <label for="mnu"><i class="fas fa-plus"></i></label>
    </div>
</section>

CSS：

#splash {
    width:100%;
    height:100vh;
    background:#ff0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align: center;
}

.info {margin: auto;}

#nav {
    margin-bottom:0;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    justify-content:space-evenly;
    width:100%;
    height:40px;
    background:#f00;
}

#c-ask, #c-sub, #c-mnu {display:none;}

#fade {
    width:100%;
    height:100%;
    position:fixed;
    top:0; left:0;
    background:rgba(0,0,0,0.5);
    display:none;
    z-index:1;
}

#popup {
    display:none;
    z-index:2;
    width:50%;
    height:50%;
    background:#fff;
    border: 1px solid #000;
    margin:auto;
    padding: 20px;
    overflow-x:hidden;
    overflow-y:auto;
    position: absolute;
    top:50%; left:50%;
    transform: translate(-50%, -50%);
}

jQuery：

$('label').click(function(){ 
    $("#fade").fadeToggle();
    $("#popup").fadeToggle();           
    var $target = $('input[type="radio"]:checked').attr('id');
    $('[id^="c-"]').hide();
    $("#c-" + $target).show();
});
$("#fade").click(function(){
    $(this).fadeOut();
    $("#popup").fadeOut();
});

Answer 1

最好使用:radio更改事件而不是label点击事件

$('input:radio:hidden').on('change',function(){  // radio change event
    $("#fade , #popup").fadeIn();           
    var $target = $(this).attr('id'); // use $(this)
    $('[id^="c-"]').hide().filter("#c-" + $target).show();
});
$("#fade").click(function(){
    $("#fade , #popup").fadeOut();
    $('input:radio:hidden').prop('checked' , false); // when hide pop up unchecked all the radios
});

$("#popup").on('click' , function(e){
  e.stopPropagation();
});

#splash {
    width:100%;
    height:100vh;
    background:#ff0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align: center;
}

.info {margin: auto;}

#nav {
    margin-bottom:0;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    justify-content:space-evenly;
    width:100%;
    height:40px;
    background:#f00;
}

#c-ask, #c-sub, #c-mnu {display:none;}

#fade {
    width:100%;
    height:100%;
    position:fixed;
    top:0; left:0;
    background:rgba(0,0,0,0.5);
    display:none;
    z-index:1;
}

#popup {
    display:none;
    z-index:2;
    width:50%;
    height:50%;
    background:#fff;
    border: 1px solid #000;
    margin:auto;
    padding: 20px;
    overflow-x:hidden;
    overflow-y:auto;
    position: absolute;
    top:50%; left:50%;
    transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />

<input hidden type="radio" id="ask" name="popinfo"/>
<input hidden type="radio" id="sub" name="popinfo"/>
<input hidden type="radio" id="mnu" name="popinfo"/>
<div id="fade">
    <div id="popup">
        <div id="c-ask">ask</div>
        <div id="c-sub">sub</div>
        <div id="c-mnu">mnu</div>
    </div>
</div>
<section id="splash">
    <div class="info">
        Info
    </div>
    <div id="nav">
        <i class="fa fa-home"></i>
        <label for="ask"><i class="fa fa-envelope"></i></label>
        <i class="fa fa-user"></i>
        <label for="sub"><i class="fas fa-edit"></i></label>
        <label for="mnu"><i class="fas fa-plus"></i></label>
    </div>
</section>

注意：就个人而言，我不喜欢使用id 作为参考。我更喜欢使用data 属性