bootstrap通过classname显示的事件在活动选项卡中查找元素。

时间:2017-11-28 10:12:06

标签: javascript jquery twitter-bootstrap

我想在当前选项卡中找到元素,其中classname为myelement,显示在bootstrap选项卡的事件中。 使用" .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.

    });
});

2 个答案:

答案 0 :(得分:2)

类标签窗格根据所选标签处于活动状态;利用它

$cityId = $request->input('city_id');
$category = $request->input('categories');
$search = $request->input('search');

$companies = DB::table('companies');
if(isset($cityId) && !empty($cityid)){
    $companies = $companies->where('city_id',$cityid);
 }
if(isset($category) && !empty($category)){
    $companies = $companies->orWhereHas('categories',
    function ($query) use ($category) {
        $query->where('id', $category);
    });
 }

 if(isset($search) && !empty($search)){
    $companies = $companies->where('name', $search)
}
$companies = $companies->get();
dd($companies);

答案 1 :(得分:1)

找到答案。

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