javascript - 如何使用 img （即 href 链接）和单选按钮（值或 id）制作一个功能并转到下一页

Question

我有这个代码：

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

所以我想做一个获取句点（例如每月）和符号（例如 Taurus）的功能，在下一页它将转到 Taurus 页面和每月的位置。

另一个例子：我选择每周和白羊座->在下一页->每周白羊座

怎么做？

Answer 1

就这样做

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