Using radio buttons for tab control using bootstrap

前端 未结 3 495
予麋鹿
予麋鹿 2020-12-25 13:45

I am trying to control tabs with radio buttons to change a content area for a scheduling screen. This works fine other than the radio buttons do not check.

Anyone g

相关标签:
3条回答
  • 2020-12-25 14:18

    The radio buttons aren't getting checked because of this code:

    e.preventDefault()
    

    To fix this, remove data-toggle="tab" from the radio buttons and then add this jQuery code:

    $('input[name="intervaltype"]').click(function () {
        $(this).tab('show');
    });
    
    0 讨论(0)
  • 2020-12-25 14:21

    Try this works for me

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

    0 讨论(0)
  • 2020-12-25 14:22

    Bootstrap 4.3.1 working tabs as radio buttons

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

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题