ブートストラップは、イベントをclassnameで示したアクティブなタブ内の要素を見つけます。

Question

「ブートストラップ」タブのイベントで、classnameがmyelementの現在のタブ内の要素を検索したいとします。 ".myelement"を使用すると、私には欲しくないすべての要素が与えられます。

https://jsfiddle.net/dcdtkubt/4/

HTML：

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#menu1">Menu 1</a></li> 
    <li><a href="#menu2">Menu 2</a></li> 
    <li><a href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p class="myelement">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p class="myelement">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p class="myelement">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p class="myelement">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

スクリプト：

$(document).ready(function(){ 
    $(".nav-tabs a").click(function(){ 
     $(this).tab('show'); 
    }); 
    $('.nav-tabs a').on('shown.bs.tab', function(event){ 
     var x = $(event.target).text();   // active tab 
     var y = $(event.relatedTarget).text(); // previous tab 
     console.log($(event.target)); 
     console.log($(".myelement")); // Want to find this inside the selected tab. 

    }); 
}); 

Answer 1

クラス]タブウィンドウには、選択したタブに基づいて、アクティブになっています。それを利用する

$(".tab-pane.active .myelement")) 

Answer 2

答えを見つけました。 li要素をループとactive一方のインデックスを見つける：

$(".myelement",$(event.target).attr('href')); 

Answer 3

ステップ1。 手順2：計算されたインデックスを使用してコンテンツにアクセスします。

$(document).ready(function(){ 
$(".nav-tabs a").click(function(){ 
    $(this).tab('show'); 
}); 
$('.nav-tabs a').on('shown.bs.tab', function(event){ 
    var x = $(event.target).text();   // active tab 
    var y = $(event.relatedTarget).text(); // previous tab 
    console.log($(event.target)); 
    // Initialize index 
    var index = -1; 
    // Find the index of active tabs 
    var tabs = $(".nav li").each(function(i) { 
     if(index === -1 && $(this).hasClass('active')) { 
     index = i; 
     } 
    }); 
    // Access calculated index of active tab 
    console.log($(".myelement")[index]); // Want to find this inside the selected tab. 

}); 

}）;