如何用bootstrap制作标签，它的标签显示一个类别的产品？

Question

我确实在互联网上的某个地方看到了一个页面，该页面令人印象深刻，如下所示：

All|Fashion|Jewerry|Food

当用户点击All 时，它将显示所有项目。 当用户单击 om Fashion 时，否则我将仅显示其类别的项目。 我记得每个项目都有类似All Fashion/All Food 这样标签控制面板会显示/隐藏项目。

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

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

提前致谢。

我做到了 它没有引导程序 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();
       });
    });
});

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

---

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>
<