HREF页面导航不使用无线电(输入)按钮

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>中，可行。

<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>

b）使用jQuery

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

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

<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>

如果要放慢滚动运动，则可以使用此JS代码：

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