jquery - Href 页面导航不适用于单选(输入)按钮

Question

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

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

将类(class)添加到您的 <a>标记(例如 clickRadio )，然后使用 jQuery 将点击事件处理程序添加到您阅读 href 的这些链接属性并将滚动位置移动到 anchor 位置。

$('.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>

如果你想减慢滚动速度，你可以使用this JS代码:

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