Question

我是javascript的新手，原谅我问一个简单的问题是否有人可以指导我如何使用JavaScript来动态列出不同的东西时单击不同的按钮。

例如：像这样link：

当我点击品牌开发，电子商务开发时，它会列出所有相关项目。

Answer 1

我在jsFiddle上创建了一个示例，请从here

查看

HTML内容如下：

<ul class='product-catlogs'>
<li><a class='product'>All</a>
</li>
<li><a class='books'>Books</a>
</li>
<li><a class='mobiles'>Mobiles</a>
</li>
<li><a class='cars'>Cars</a>
</li>

<ul class='product-list'>
<li>
    <div class='product books'>book1</div>
</li>
<li>
    <div class='product books'>book2</div>
</li>
<li>
    <div class='product books'>book3</div>
</li>
<li>
    <div class='product mobiles'>Iphone</div>
</li>
<li>
    <div class='product mobiles'>Sumsang</div>
</li>
<li>
    <div class='product cars'>Mercedes</div>
</li>
<li>
    <div class='product cars'>Toyota</div>
</li>
<li>
    <div class='product cars'>Ford</div>
</li>

js代码如下：

$('.product-catlogs a').click(function (e) {
  var tag = this.className;
  $('ul li .' + tag).parent().show();
  $('ul li div').not('.' + tag).parent().hide();
})

Javascript，点击不同的按钮时如何列出不同的东西

1 个答案: