使用單選按鈕更改網站 URL

Question

這是一個簡單的問題，但我遇到了問題。 如果選中單選按鈕，我想更改網站 url。 這是我的引導單選按鈕。

 <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-dark active"> <input type="radio" name="ai" id="option1" autocomplete="off" checked> Account Information </label> <label class="btn btn-dark"> <input type="radio" name="ps" id="option2" autocomplete="off"> Password And Security </label> <label class="btn btn-dark"> <input type="radio" name="c" id="option3" autocomplete="off"> Contact </label> </div>

Answer 1

也許像這樣

 <script> function change_loc(url){ document.location.href = url; } </script> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-dark active"> <input type="radio" name="ai" id="option1" autocomplete="off" checked> Account Information </label> <label class="btn btn-dark"> <input type="radio" name="ps" id="option2" autocomplete="off" onclick="change_loc('https://www.google.com/')"> Password And Security </label> <label class="btn btn-dark"> <input type="radio" name="c" id="option3" autocomplete="off" onclick="change_loc('https://www.amazon.com/')"> Contact </label> </div>

Answer 2

不知道你想用 URL 做什么，為什么收音機上有不同的名字，那么它們最好作為復選框

這將修改現有的 URL，您可以根據位置或歷史 API 進行更改

 $(function() { $(".btn-group-toggle input[type=radio]").on("click",function() { let url = new URL(location.href); url.searchParams.set(this.id,this.name) console.log(url); // location = url; }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-dark active"> <input type="radio" name="ai" id="option1" autocomplete="off" checked> Account Information </label> <label class="btn btn-dark"> <input type="radio" name="ps" id="option2" autocomplete="off"> Password And Security </label> <label class="btn btn-dark"> <input type="radio" name="c" id="option3" autocomplete="off"> Contact </label> </div>