Изменение URL сайта с помощью радио кнопок - PullRequest
Новая
       14

Изменение URL сайта с помощью радио кнопок

0 голосов
/ 02 мая 2020

Это простой вопрос, но у меня проблемы с ним. Я хочу изменить URL-адрес веб-сайта, если установлен переключатель. Вот мои bootstrap радиокнопки. 

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

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Не уверен, что вы хотите сделать с 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>
0 голосов
/ 02 мая 2020

Может быть так 

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