Question

我正试图让单选按钮转到下面的网址，无法让它们工作。我错过了什么？我已经尝试了一些我可能想到的东西，让检查单选按钮转到网址，但我无法理解。让我知道您需要哪些其他信息。感谢。

     <div class="pos_lc">
      <div class="container">
        <!-- OUTER SHADOW -->
        <div class="de">
          <!-- TEXT -->
          <div class="den">
            <!-- LINE -->
            <hr class="line">
            <hr class="line">
            <hr class="line">
            <!-- SWITCH -->
            <div class="switch">

              <!-- TEXT -->
              <label for="switch_off"><span><img class="img_btn" src="/pics/home25w.png" alt="home" height="25px" width="25px"/></span></label>
              <label for="switch_1"><span><img class="img_btn" src="/pics/bio25w.png" alt="bio" height="25px" width="25px"/></span></label>
              <label for="switch_2"><span><img class="img_btn" src="/pics/music25w.png" alt="music" height="25px" width="25px"/></span></label>
              <label for="switch_3"><span><img class="img_btn" src="/pics/calendar25w.png" alt="calendar" height="25px" width="25px"/></span></label>
              <label for="switch_4"><span><img class="img_btn" src="/pics/contact25w.png" alt="contact" height="25px" width="25px"/></span></label>
              <label for="switch_5"><span><img class="img_btn" src="/pics/store25w.png" alt="store" height="25px" width="25px"/></span></label>

              <!-- INPUT -->
              <input id="switch_off" name="radio-set" type="radio">
              <a href="#st-panel-1"></a>
              <input id="switch_1" name="radio-set" type="radio">
              <a href="#st-panel-2"></a>
              <input id="switch_2" name="radio-set" type="radio">
              <a href="#st-panel-3"></a>
              <input id="switch_3" name="radio-set" type="radio">
              <a href="#st-panel-4"></a>
              <input id="switch_4" name="radio-set" type="radio">
              <a href="#st-panel-5"></a>
              <input id="switch_5" name="radio-set" type="radio">
              <a href="#st-panel-6"></a>

              <!-- LIGHT -->

              <div class="light"><span></span></div>
              <!-- DOT -->
              <div class="dot"><span></span></div>
              <!-- CENTER -->
              <div class="dene">
                <div class="denem">
                  <div class="deneme">
                  </div><!-- deneme -->
                </div><!-- denem-->
              </div><!-- dene -->
            </div><!--switch -->
          </div><!-- den -->
        </div><!-- de -->
      </div><!-- container -->          
    </div><!-- pos_lc -->

Answer 1

使用HTML和直接javaScript，您可以使用以下内容。我只是从关于这个主题的几个随机搜索中收集到它。

<SCRIPT LANGUAGE="JavaScript">

     function radioLink(dest){

         if (document.radioLinks.pickme)

            if (dest == 'NBC')
                location='http://www.NBCexample.org'
            if (dest == 'CBS')
                location='http://www.CBSexample.org'
            if (dest == 'ABC')
                location='http://www.ABCexample.org'
     }

 </script>

...

<FORM NAME="radioLinks">
     <INPUT TYPE="radio" NAME="pickme" id="NBC" onClick="radioLink(NBC)"> NBC Networks
     <INPUT TYPE="radio" NAME="pickme" id="NBC" onClick="radioLink(CBS)"> CBS Networks
     <INPUT TYPE="radio" NAME="pickme" id="NBC" onClick="radioLink(ABC)"> ABC Networks
 </FORM>

你显然可以在此基础上进一步发挥作用，但我只是指出了一个可能的使用方向。

Answer 2

jQuery解决方案，这里是FIDDLE

我看看你的源代码，我注意到你没有包含jQuery库所以首先你必须在你的<head>部分中包含jQuery库，如下所示

Download jQuery Library 1.10.2并将库放在根文件夹中，而不是放在HTML文档的<head>部分中的代码下面。

<script src="jquery-1.10.2.min.js"></script>

或使用CDN版本

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

然后将class提供给与节元素

的id相同的无线电元素

<input id="switch_off" name="radio-set" type="radio">
<input id="switch_1" class="st-panel-1" name="radio-set" type="radio" checked>
<input id="switch_2" class="st-panel-2" name="radio-set" type="radio">
<input id="switch_3" class="st-panel-3" name="radio-set" type="radio">
<input id="switch_4" class="st-panel-4" name="radio-set" type="radio">
<input id="switch_5" class="st-panel-5" name="radio-set" type="radio">

*在你的情况下，我不能使用HTML5数据属性（你的doctype是XHTML 1.0），但它是相同的，因为我们将使用类来定位section元素。

然后在</body>代码

之前加入此脚本

<script>
$(function() {
  $('input[type="radio"]').click(function() {
    if($(this).is(':checked')) {
       $('html, body').stop().animate({ scrollTop: $('#'+$(this).attr('class')).offset().top }, 1500, 'easeOutQuart');
    }
  });
});
</script>

单选按钮转到URL

2 个答案: