Twitter Bootstrap Question posted in

Find and focus first element with jquery – Twitter bootstrap

This is my bootstrap tab and I have two different elements are:
.nav-tabs and .tab-content and I want to focus first element if my ul li aria-controls attribute and my tab-content id is match/same

$(function() {

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

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

ul li {
  padding: 10px;
}

.tab-content {
  padding: 10px;
}
<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>
Tags:

4

Answers


  1. 0

    You can use :data selector and first() method

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

    For :data selector you need use JqueryUi selector

    Without JqueryUI

     jQuery("ul li").find('[aria-controls]').first().val()
    Login or Signup to reply.
  2. 0

    You can use .focus() jQuery method to focus first input inside selected .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();
    });
});
    Login or Signup to reply.
  3. 0

    Try this:

    $(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();
  });

});
    Login or Signup to reply.
  4. 0

    You can use

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

    Working Demo

    $(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;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search