Question

我在不同部分的单个网页中创建了一些单选按钮。我希望当在第一部分中单击一个单选按钮时，页面将跳转到下一部分以获得另一个单选按钮的问题。我用标签覆盖了输入和标签元素，但它没有重定向到下一部分。以下是我的代码

HTML代码

 <!--section1 /first radio button start-->
    <div id="section1">enter code here
    <!---section heading--->
      <h2 class="text-center">I am looking for an</h2>
    <!---radio buttons --->  
      <div class="row">
       <div class="col-2 notmobile"></div>
         <div class="col-lg-4 col-md-6 col-sm-6 col-6">
            <a href="#section2">
            <input class="check-with-label" type="radio" id="interior" name="firstradio" checked>
              <label class="myradio" for="interior">
                 <span>Interior Designer</span>    
              </label> 
             </a>
            </div>
           <div class="col-lg-4 col-md-6 col-sm-6 col-6">
            <a href="#section2">
            <input class="check-with-label" type="radio" id="architect" name="firstradio">
              <label class="myradio" for="architect"> 
                 <span>Architect</span>  
              </label>
            </a>
           </div>
          <div class="col-2 notmobile"></div>
        </div>
       <!---first radio close--> 
    </div>
     <!--section1 /first radio button end-->
     <!--section2 /second radio button start-->
     <div id="section2" name="section2">
     <!---section heading--->
      <h2 class="text-center">The designer would work on my</h2>
    <!---second radio buttons --->  
      <div class="row">
         <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="home" name="sectradio" checked>
             <label class="myradio" for="home">
                 <span>Home</span>
             </label>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="office" name="sectradio">
              <label class="myradio" for="office"> 
                 <span>Office</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="hotel" name="sectradio">
              <label class="myradio" for="hotel"> 
                 <span>Hotel</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="showroom" name="sectradio">
              <label class="myradio" for="showroom"> 
                 <span>Showroom</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="restaurant" name="sectradio">
              <label class="myradio" for="restaurant"> 
                 <span>Restaurant</span>
              </label>
           </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-6">
            <input class="check-with-label" type="radio" id="shop" name="sectradio">
              <label class="myradio" for="shop"> 
                 <span>Shop</span>
              </label>
           </div>
        </div>
       <!---second radio close-->
      </div>
    <!--section2 /second radio button end-->

css代码

#section1{
  height:100vh;
}
#section2{
 height:100vh;
}
.myradio{
    background-color: rgba(1.6%,1.6%,1.6%,0.4);
    height:110px;
    width: 100%;
    border-radius: 9px;
    padding: 30px;
    color: rgba(242,237,237,0.4);
    line-height:40px;
    font-size: 28px;
    font-weight: 200;
    text-align: center;
}
.check-with-label{
    display: none;
}
.check-with-label:checked + .myradio {
   background-color: rgba(204,204,204,0.2);
   color: white;
}

只想在第一部分选择单选按钮时，页面应跳转到第二部分以获取其他无线电选项。任何有关这方面的帮助都会让我高兴。

Answer 1

我可以建议2个解决方案：

A）仅链接标签

将<a>标记移到<label>内，有效。

＆＃13;

<input class="check-with-label" type="radio" id="interior" name="firstradio" checked>
<label class="myradio" for="interior">
  <a href="#section2">
    <span>Interior Designer</span>
  </a>
</label>

＆＃13;

B）使用jQuery

在<a>标记中添加一个类（例如clickRadio），然后使用jQuery为这些链接添加一个单击事件处理程序，您可以在其中读取href属性并将滚动位置移动到锚位置。

＆＃13;

$('.clickRadio').click(function() {
    var id = $(this).attr('href');
    $(document).scrollTop($(id).offset().top);
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a class="clickRadio" href="#section2">
    <input class="check-with-label" type="radio" id="interior" name="firstradio" checked>
    <label class="myradio" for="interior">
            <span>Interior Designer</span>
    </label>
</a>

<div id="section2"></div>

＆＃13;

如果您想减慢滚动动作，可以使用this JS代码：

$('.clickRadio').click(function() {
    var id = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(id).offset().top
    }, 500); // <-- animation duration in milliseconds
})

Href页面导航无法使用无线电（输入）按钮

1 个答案: