javascript - 如何使用bootstrap制作选项卡，使其选项卡显示某个类别的产品？

Question

我确实在互联网上的某个地方看到了一个页面，其中有令人印象深刻的选项卡，如下所示:

All|Fashion|Jewerry|Food

当用户点击全部时，它将显示所有元素。 当用户点击 om Fashion 时，否则我将仅显示其类别的元素。 我记得每个元素都有类似 All Fashion/All Food 的内容，以便选项卡控制面板可以显示/隐藏元素。

我试图找到一些关于 Bootstrap 上的选项卡的教程。但我在文档中没有看到任何类似的示例。

有人可以展示如何使用 Bootstrap 和不使用 Bootstrap 吗？？？ 原因是我只擅长后端。 我正在学习前端。

提前致谢。

我做到了 它没有 Bootstrap html:

    <ul id='list_tabs'>
        <li><a data-filter='*' href='#'>All</a></li>
        <li><a data-filter='meat' href='#'>meat</a></li>
        <li><a data-filter='fish' href='#'>fish</a></li>            
    </ul>
    <ul id='list_products'>
        <li data-category='fish meat'>product 1 </li>
        <li data-category='fish'>product 2 </li>
        <li data-category='meat'>product 3 </li>        
    </ul>

我的 JavaScript:

$(document).ready(function(){

    $('#list_tabs').click(function(event){
       var filter = $(event.target).attr('data-filter');        

        $('#list_products li').each(function(){
           var item = $(this);  
           if(filter=='*'||(item.attr('data-category').indexOf(filter)!= -1))
             item.show();
           else 
             item.hide();
       });
    });
});

我仍在研究如何使用 Bootstrap 来做到这一点。 感谢大家的帮助。

<小时/>

P/s:我确实看到了与 this site 中相同的控件 我正在调查它。但我还是希望有人能帮助我。

Answer 1

我喜欢检查this也。您可以在学习时即兴发挥。我为您提供了一个从这里开始的设置。

// optional code: Throw event on tab change and work with it.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var elem = $(e.target),
    target = elem.attr("href");
  if (target === hashify('Tab_1') || target === hashify('Tab_3') || target === hashify('Tab_5')) {
    $(hashify('testImage')).attr('src', 'http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a');
  }
  else {
    $(hashify('testImage')).attr('src', 'https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png');
  }
});
  
function hashify(str){
  return '#' + str;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#Tab_1" data-toggle="tab">Tab 1</a>
  </li>
  <li class=""><a href="#Tab_2" data-toggle="tab">Tab 2</a>
  </li>
  <li class=""><a href="#Tab_3" data-toggle="tab">Tab 3</a>
  </li>
  <li class=""><a href="#Tab_4" data-toggle="tab">Tab 4</a>
  </li>
  <li class=""><a href="#Tab_5" data-toggle="tab">Tab 5</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active in" id="Tab_1">
    Tab 1
  </div>
  <div class="tab-pane" id="Tab_2">
    Tab 2
  </div>
  <div class="tab-pane" id="Tab_3">
    Tab 3
  </div>
  <div class="tab-pane" id="Tab_4">
    Tab 4
  </div>
  <div class="tab-pane" id="Tab_5">
    Tab 5
  </div>
  <img id = "testImage" src = "http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="Logo" height="150" width="150">
</div>
<