使用jquery

Question

这是我的引导标签，我有两个不同的元素： .nav-tabs和.tab-content，如果我的ul li aria-controls属性和我的tab-content ID匹配/相同，我想关注第一个元素

＆＃13;

＆＃13;

$(function() {

  var tabMenuLink = $(".nav-tabs li a");
  tabMenuLink.on("click", function() {
    tabId = $(this).attr("aria-controls");
    alert(tabId);

  });
});

＆＃13;

.box {
  width: 700px;
  margin: 100px auto;
}

ul li {
  padding: 10px;
}

.tab-content {
  padding: 10px;
}

＆＃13;

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

<div class="box">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li>
    <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li>
    <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li>
    <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li>

  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="otel-ara">
      <input type="text" placeholder="otel first input">
      <input type="text" placeholder="otel second input">
    </div>
    <div role="tabpanel" class="tab-pane" id="tur-ara">

      <input type="text" placeholder="tur first input">
      <input type="text" placeholder="tur second input">
    </div>
    <div role="tabpanel" class="tab-pane" id="gemi-ara">

      <input type="text" placeholder="gemi first input">
      <input type="text" placeholder="gemi second input">
    </div>
    <div role="tabpanel" class="tab-pane" id="ucak-ara">

      <input type="text" placeholder="uçak first input">
      <input type="text" placeholder="uçak second input">
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用:data选择器和first()方法

jQuery("ul li:data(aria-controls)").first().val()

对于:data选择器，您需要使用JqueryUi选择器

没有JqueryUI

 jQuery("ul li").find('[aria-controls]').first().val()

Answer 2

您可以使用.focus() jQuery方法将第一个输入聚焦到选定的.tab-content

中

$(function() {
    var tabMenuLink = $(".nav-tabs li a");
    tabMenuLink.on("click", function() {
        tabId = $(this).prop("aria-controls");
        var selectedTab = $("#"+tabId);
        selectedTab.find('input').first().focus();
    });
});

Answer 3

试试这个：

$(function() {

  var tabMenuLink = $(".nav-tabs li a");

  tabMenuLink.on("click", function() {
    var tabId = $(this).attr("aria-controls");

    $(".tab-pane").removeClass("active");
    $("#"+tabID).addClass("active");
    $("#"+tabID).find("input").filter(':visible:first').focus();
  });

});

Answer 4

您可以使用

CustomPanel

工作演示

$('.tab-pane').hide(0);
$('#'+tabId).show(0);
$('#'+tabId).find('input:first').focus();

$(function() {
  var tabMenuLink = $(".nav-tabs li a");
  tabMenuLink.on("click", function() {
    tabId = $(this).attr("aria-controls");
    $('.tab-pane').hide(0);
    $('#'+tabId).show(0);
    $('#'+tabId).find('input:first').focus();
  });
});

.box {
  width: 700px;
  margin: 100px auto;
}

ul li {
  padding: 10px;
}

.tab-content {
  padding: 10px;
}