如何在div中选择选中的输入以在另一个div中显示？ 没有javascript

编程问答 2022-06-03

问题描述

我有一个必须在其中做菜单的项目。

当我单击<input />时，它必须显示一个<div>。

当我直接在代码中编写列表时，它可以工作，但是问题是当我将列表放入<div>中时，它不起作用。为什么？

以下代码有效：

#home,#vin,#ipp,#rez {
    position: relative;
    margin: 10px;
    cursor: pointer;
}
#acceuilCheck,#vinlandCheck,#ippoCheck,#rezeroCheck,#acceuil,#vinland,#ippo,#rezero {
    display: none;
}
#acceuilCheck:checked~.paragraphe #acceuil {
    display: block;
}
#vinlandCheck:checked~.paragraphe #vinland {
    display: block;
}
#ippoCheck:checked~.paragraphe #ippo {
    display: block;
}
#rezeroCheck:checked~.paragraphe #rezero {
    display: block;
}
<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="Style.css">
    <title>Wiki No Anime</title>

</head>
<body>
        <input id="acceuilCheck" name="list" type="radio">
        <label for="acceuilCheck" id="home">Accueil</label>
        <input id="vinlandCheck" name="list" type="radio">
        <label for="vinlandCheck" id="vin">Vinland</label>
        <input id="ippoCheck" name="list" type="radio">
        <label for="ippoCheck" id="ipp">Ippo</label>
        <input id="rezeroCheck" name="list" type="radio">
        <label for="rezeroCheck" id="rez">Re:Zero</label>
    <div class="paragraphe">
        <div id="acceuil">Presentation anime</div>
        <div id="vinland">Viland c'est du ma nibru ça</div>
        <div id="ippo">Ippo franchement c'est trop magnifique</div>
        <div id="rezero">Re:Zero est un anime de ouffff !!!!</div>
    </div>
</body>
</html>

这是无效的代码：

#home,#rezero {
    display: none;
}
.menu #acceuilCheck:checked~.paragraphe #acceuil {
    display: block;
}
.menu #vinlandCheck:checked~.paragraphe #vinland {
    display: block;
}
.menu #ippoCheck:checked~.paragraphe #ippo {
    display: block;
}
.menu #rezeroCheck:checked~.paragraphe #rezero {
    display: block;
}
<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="Style.css">
    <title>Wiki No Anime</title>
</head>
<body>
    <div class="menu">
        <input id="acceuilCheck" name="list" type="radio">
        <label for="acceuilCheck" id="home">Accueil</label>
        <input id="vinlandCheck" name="list" type="radio">
        <label for="vinlandCheck" id="vin">Vinland</label>
        <input id="ippoCheck" name="list" type="radio">
        <label for="ippoCheck" id="ipp">Ippo</label>
        <input id="rezeroCheck" name="list" type="radio">
        <label for="rezeroCheck" id="rez">Re:Zero</label>
    </div>
    <div class="paragraphe">
        <div id="acceuil">Presentation anime</div>
        <div id="vinland">Viland c'est du ma nibru ça</div>
        <div id="ippo">Ippo franchement c'est trop magnifique</div>
        <div id="rezero">Re:Zero est un anime de ouffff !!!!</div>
    </div>
</body>
</html>

没有JavaScript怎么办？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-selectorshtmlinputinputjavascript