如何使用 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>

所以我想做一個函數來獲取周期（例如每月）和符號（例如金牛座），在下一頁上它將轉到金牛座頁面和每月的位置。

另一個例子：我選擇每周和白羊座->在下一頁->每周白羊座

怎么做？

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>