单击下一个 HTML 页面在 radio-toolbar div 标签内不起作用

Question

当我运行这段代码不使用 div 标签 radio-toolbar 时，另一个页面的 onlclick 函数（以 Whosebug 主页为例）有效。当我添加 div 标签 radio-toolbar 以设计单选按钮时，onlick 不起作用。

这里是 HTML 和 CSS，没有 div 标签 radio-toolbar...

<style>
  #main_page {
  background: #34357c;
  padding: 10px 20px 30px 20px;
  width: 900px;
  height: 600px;
  font-family: 'roboto', sans-serif;
  position: fixed;
  z-index: -1;
  margin-top:315px; 
  margin-left: 415px;
  }
</style>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id= "main_page">

<input type = "radio" id = "ID1" value = "Husband" onclick = "window.location.href = 'https://www.whosebug.com'"><label>Husband</label>
<input type = "radio" id = "ID2" value = "Wife" onclick = "window.location.href = 'https://www.whosebug.com'"><label>wife</label>

</div>
</body>
</html>

当我在 div 标签 Radio-toolbar 中添加单选按钮样式时，另一个 html 的 onlick 功能不起作用...

<style>
          #main_page {
          background: #34357c;
          padding: 10px 20px 30px 20px;
          width: 900px;
          height: 600px;
          font-family: 'roboto', sans-serif;
          position: fixed;
          z-index: -1;
          margin-top:315px; 
          margin-left: 415px;
          }
    
        .radio-toolbar input[type="radio"] {
            margin-top: 25px !important;
            opacity: 0 
         }
        
        .radio-toolbar label {
            display: inline-block;
            border-radius: 50px;
            padding: 10px 20px;
            font-size:25px;
            border: 2px solid #444;
            width: 110px;
            height: 110px;
            vertical-align: middle;
            margin-bottom: 20px;
            text-align: center;
            background: #daeaff;
            color: #4c4de4;
           }
        
        .radio-toolbar label:hover {
          background-color: #white;
          color: #DDDDDD;
        }
 </style>

<!DOCTYPE html>
        <html>
        <head>
             
        
        </head>
        <body>

    <div id= "main_page">
    
    <div class = "radio-toolbar">
    
    
    <input type = "radio" id = "ID1" value = "Husband" onclick = "window.location.href = 'https://www.whosebug.com'"><label>Husband</label>
    <input type = "radio" id = "ID2" value = "Wife" onclick = "window.location.href = 'https://www.whosebug.com'"><label>wife</label>

    </div>
    </div>
    
    </body>
    </html>

使用代码片段时，您可以在第一个代码片段中看到单击其中一个单选按钮会产生一个操作，而在第二个代码片段中单击单选按钮后没有任何反应。

感谢帮助！

编辑：感谢@DCR 帮助使问题更清楚

Answer 1

我将您的 href 更改为 https://www.whosebug.com，以便它们可以在代码段中使用。它在这里工作，我们遇到错误或问题

<style>
  #main_page {
  background: #34357c;
  padding: 10px 20px 30px 20px;
  width: 900px;
  height: 600px;
  font-family: 'roboto', sans-serif;
  position: fixed;
  z-index: -1;
  margin-top:315px; 
  margin-left: 415px;
  }
</style>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id= "main_page">

<input type = "radio" id = "ID1" value = "Husband" onclick = "window.location.href = 'https://www.whosebug.com'"><label>Husband</label>
<input type = "radio" id = "ID2" value = "Wife" onclick = "window.location.href = 'https://www.whosebug.com'"><label>wife</label>

</div>
</body>
</html>

Answer 2

您需要在标签上放置 onclick 事件，因为您隐藏了单选按钮

<style>
          #main_page {
          background: #34357c;
          padding: 10px 20px 30px 20px;
          width: 900px;
          height: 600px;
          font-family: 'roboto', sans-serif;
          position: fixed;
          z-index: -1;
          margin-top:315px; 
          margin-left: 415px;
          }
    
        .radio-toolbar input[type="radio"] {
            margin-top: 25px !important;
            opacity: 0 
         }
        
        .radio-toolbar label {
            display: inline-block;
            border-radius: 50px;
            padding: 10px 20px;
            font-size:25px;
            border: 2px solid #444;
            width: 110px;
            height: 110px;
            vertical-align: middle;
            margin-bottom: 20px;
            text-align: center;
            background: #daeaff;
            color: #4c4de4;
           }
        
        .radio-toolbar label:hover {
          background-color: #white;
          color: #DDDDDD;
        }
 </style>

<!DOCTYPE html>
        <html>
        <head>
             
        
        </head>
        <body>

    <div id= "main_page">
    
    <div class = "radio-toolbar">
    
    
    <input type = "radio" id = "ID1" value = "Husband" ><label onClick = "window.location.href = 'https://www.whosebug.com'">Husband</label>
    <input type = "radio" id = "ID2" value = "Wife" ><label onClick = "window.location.href = 'https://www.whosebug.com'">wife</label>

    </div>
    </div>
    
    </body>
    </html>

单击下一个 HTML 页面在 radio-toolbar div 标签内不起作用

Onclick to next HTML page not working inside radio-toolbar div tag

html

css

radio-button