將焦點設置到引導程序選項卡上的輸入內選項卡上的變化

當選擇tabOne時，需要將焦點設置爲「inputOne」輸入，並在選擇tabTwo時將焦點設置爲「inputTwo」。將焦點設置到引導程序選項卡上的輸入內選項卡上的變化

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tabOne" data-toggle="tab">Tab One</a></li> 
    <li class=""><a href="#tabTwo" data-toggle="tab">Tab Two</a></li> 
</ul> 

<div id="tabContent" class="tab-content"> 
    <div class="tab-pane fade" id="tabOne"> 
      <input type="text" id="inputOne" /> 
    </div> 
    <div class="tab-pane fade" id="tabTwo"> 
      <input type="text" id="inputTwo" /> 
    </div> 
</div>

來源

2014-06-30 Rafael A. M. S.

看這個bootply

JS：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var target = e.target.attributes.href.value; 
    $(target +' input').focus(); 
})

你可以找到文檔here：

來源

2014-06-30 14:06:43 pbenard

我改變了（目標+'輸入'）到（'#inputTwo'）並且它工作了！謝謝！ –

http：//www.bootply .com/d4A1aywY3w：在選項卡上一，輸入一個重點，相同的＃2 ... – pbenard

如果我在每個選項卡上有幾個輸入，並且想要在每個選項卡上選擇一個特定的輸入？ –

你可以寫下面的jQuery代碼：

$("#tabOne").click(function() { 
    $("#inputOne").focusin()   
});

做同樣的事情也tabTwo。

來源

2014-06-30 14:01:35 stacky

嗨，謝謝你的回答，但它不工作...我應該在標籤標題上放一個ID並檢查它的點擊事件而不是tabContent div ID嗎？ –

$（document）.ready（function（）。你寫了這個函數 – stacky

你可以依靠「顯示」引導事件的標籤來處理這個問題：

$(".nav-tabs a").on("shown.bs.tab", function(event) { 
    $(event.target.href.value + " input").focus(); 
});

上的標籤事件

來源

2014-06-30 14:05:29 nthall

將焦點設置到引導程序選項卡上的輸入內選項卡上的變化

回答

相關問題