如何使用img(这是href链接)和单选按钮(值或id)制作函数,然后转到下一页

时间:2019-03-29 11:23:18

标签: javascript html javaquery

我有此代码:

<div id="section">
  <h3 for="horoscope">choose horoscope</h3>
  <table>
    <tr>
      <td>
        <input type="radio" name="period" value="week" id="week" checked/>
        <b>'weekly</b>

        <td>
          <input type="radio" name="period" value="month" id="month" />
          <b>monthly</b>

          <td>
            <input type="radio" name="period" value="year" id="year">
            <b>yearly</b>
          </td>
    </tr>
  </table>

  <table id="horoscope" cellpadding="10">

    <td><a href="Aries.html"><img src="https://cdn.pixabay.com/photo/2012/04/18/01/12/aries-36388_960_720.png" height="50px" width="53px" alt="aries" /></a>
    </td>
    <td>
      <a href="Taurus.html"><img src="https://cdn.pixabay.com/photo/2012/04/18/01/14/taurus-36397_960_720.png" height="50px" width="48px" alt="Taurus" /></a>
    </td>
    <td>
      <a href="Gemini.html"><img src="https://cdn.pixabay.com/photo/2012/04/18/01/13/gemini-36391_960_720.png" height="50px" width="49px" alt="Gemini" /></a>
    </td>
    </tr>
  </table>

所以我想执行获取周期(例如,每月)和符号(例如金牛座的金牛座)的功能,然后在下一页上转到金牛座页面和每月的位置。

另一个例子:我在下一页中选择“每周和白羊座”->“每周白羊座”

该怎么做?

1 个答案:

答案 0 :(得分:0)

就这样吧

  

您的HTML代码

<div id="section">
        <h3 for="horoscope">choose horoscope</h3>
        <table>
            <tr>
                <td>
                    <input type="radio" name="period" value="week" id="week" checked/>
                    <b>'weekly</b>

                <td>
                    <input type="radio" name="period" value="month" id="month"/>
                    <b>monthly</b>

                <td>
                    <input type="radio" name="period" value="year" id="year">
                    <b>yearly</b>
                </td>
            </tr>
        </table>

        <table id="horoscope" cellpadding="10">
            <tr>
                <td><img onclick="redirect('Aries.html')"
                         src="https://cdn.pixabay.com/photo/2012/04/18/01/12/aries-36388_960_720.png" height="50px"
                         width="53px" alt="aries"/></td>
                <td><img onclick="redirect('Taurus.html')"
                         src="https://cdn.pixabay.com/photo/2012/04/18/01/14/taurus-36397_960_720.png" height="50px"
                         width="48px" alt="Taurus"/></td>
                <td><img onclick="redirect('Gemini.html')"
                         src="https://cdn.pixabay.com/photo/2012/04/18/01/13/gemini-36391_960_720.png" height="50px"
                         width="49px" alt="Gemini"/></td>
            </tr>
        </table>
    </div>
  

您的脚本

<script>
function redirect(link) {
    window.location.href=link+"#"+$("input[name='period']:checked").val();
}
</script>