使用單選按鈕使用引導程序進行選項卡控制

[英]Using radio buttons for tab control using bootstrap


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 got any ideas how to fix this?

任何人有任何想法如何解決這個問題?

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

Here is the example in jsfiddle http://jsfiddle.net/nEWMq/

以下是jsfiddle http://jsfiddle.net/nEWMq/中的示例

2 个解决方案

#1


21  

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:

要解決此問題,請從單選按鈕中刪除data-toggle =“tab”,然后添加此jQuery代碼:

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

#2


1  

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>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/02/20/72f8814f8e199717bbf217843780cb.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com