Использование переключателей для управления вкладками с помощью начальной загрузки

Question

Я пытаюсь управлять вкладками с помощью радиокнопок, чтобы изменить область содержимого для экрана планирования. Это отлично работает, кроме переключателей не проверять.

У кого-нибудь есть идеи, как это исправить?

<div>
    <div>
        <input id="optDaily" name="intervaltype" checked type="radio" data-target="#scheduleDaily" data-toggle="tab">
        <label for="optDaily">Daily</label>
    </div>
    <div>
        <input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly" data-toggle="tab">
        <label for="optWeekly">Weekly</label>
    </div>
    <div>
        <input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly" data-toggle="tab">
        <label for="optMonthly">Monthly</label>
    </div>
</div>

<div class="tab-content">
    <div id="scheduleDaily" class="tab-pane active schedule-pane" >
        Daily
    </div>

    <div id="scheduleWeekly" class="tab-pane schedule-pane" >
        Weekly
    </div>

    <div id="scheduleMonthly" class="tab-pane schedule-pane" >
        Montly
    </div>
</div>

Вот пример в jsfiddle http://jsfiddle.net/nEWMq/

Answer 1

Радиокнопки не проверяются из-за этого кода:

e.preventDefault()

Чтобы это исправить, удалите data-toggle="tab" из переключателей, а затем добавьте этот код JQuery:

$('input[name="intervaltype"]').click(function () {
    $(this).tab('show');
});

Answer 2

Рабочие вкладки Bootstrap 4.3.1 как переключатели

$(document).ready(function () {
  $('input[name="intervaltype"]').click(function () {
      $(this).tab('show');
      $(this).removeClass('active');
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 


<div class="nav nav-tabs" role="tablist">
<div>
    <input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
    <label for="optDaily">Daily</label>
</div>
<div>
    <input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
    <label for="optWeekly">Weekly</label>
</div>
<div>
    <input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
    <label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
    <div id="scheduleDaily" class="tab-pane active">Daily</div>
    <div id="scheduleWeekly" class="tab-pane">Weekly</div>
    <div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>

Answer 3

Попробуйте это работает для меня

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
 <div class="row">
  <div class="span12">
   <p class="lead">Bare minimum radio button tabs example:</p>

   <div id="tab" class="btn-group" data-toggle="buttons">
    <a href="#prices" class="btn btn-default active" data-toggle="tab">
                    <input type="radio" />Prices</a>
    <a href="#features" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Features</a>
    <a href="#requests" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Requests</a>
    <a href="#contact" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Contact</a>
   </div>

   <div class="tab-content">
    <div class="tab-pane active" id="prices">Prices content</div>
    <div class="tab-pane" id="features">Features Content</div>
    <div class="tab-pane" id="requests">Requests Content</div>
    <div class="tab-pane" id="contact">Contact Content</div>
   </div>
  </div>
 </div>
</div>