javascript - 如何使用两个按钮调用和隐藏列表 - 使用 Javascript HTML CSS？

Question

我真的很难掌握使用 JS。一旦我拥有一个工作功能，我就会获胜 - 但让一个工作功能让我很痛苦。我正在尝试使用两个按钮，每个按钮调用一个单独的名称列表。当我打开页面时，我希望一个列表已经显示(运动列表)和一个按钮(运动按钮)已经被点击，当我点击第二个按钮(元素)时，我希望运动列表消失，元素列表显示出现。这些列表的所有样式都是用 CSS 完成的。

我是否将列表存储在我的 HTML 中？我将它们存储在 JS 中吗？我敢肯定这是相当基本的，但我就是无法让它工作，这让我抓狂。

目前我的代码是这样的:

JS - 只为一个按钮。我将如何添加第二个按钮？

var main = function () {
    $('.Btn').click(function () {
        $('itemList').hide(200);
        $(this).children('sportList').show(200);
    })
}

$(document).ready(main);

HTML:

<!--Button Area-->
<div class="buttonArea">
    <div class="container">
        <div class="row">
            <div class="btn">Choose By Sport</div>
            <div class="btn">Choose by Item</div>
        </div>
    </div>
</div>

<!--Sport List-->
<div class="sportList">
    <div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul style="list-style-type:none">
                <li>American Football</li>
                <li>Basketball</li>
                <li>Cricket</li>
                <li>Cycling</li>
            </ul>
        </div>
    </div>
    </div>
</div>

<!--Item List-->
<div class="sportList">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul style="list-style-type:none">
                    <li>Headwear</li>
                    <li>T-shirts</li>
                    <li>Gloves</li>
                    <li>Tracksuit Bottoms</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS:

/*Buttons*/
.btn {
  text-align:center;
  background: #551A8B;
  background-image: -webkit-linear-gradient(top, #551A8B, #551A8B);
  background-image: -moz-linear-gradient(top, #551A8B, #551A8B);
  background-image: -ms-linear-gradient(top, #551A8B, #551A8B);
  background-image: -o-linear-gradient(top, #551A8B, #551A8B);
  background-image: linear-gradient(to bottom, #551A8B, #551A8B);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Verdana, sans-serif;
  color: #fff;
  font-size: 18px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  margin-left:50px;
  margin-right:50px;
}
.btn:hover {
  background: #808080;
  background-image: -webkit-linear-gradient(top, #808080, #808080);
  background-image: -moz-linear-gradient(top, #808080, #808080);
  background-image: -ms-linear-gradient(top, #808080, #808080);
  background-image: -o-linear-gradient(top, #808080, #808080);
  background-image: linear-gradient(to bottom, #808080, #808080);
  text-decoration: none;
  color:#551A8B;
}
.buttonArea{
    background-color: #fff;
    padding-top:10px;
    padding-bottom: 10px;
    text-align:center;
}
.buttonArea .container {
  position:relative;
  top:20px;
}

那里有很多 CSS，可能对您没有用，但您永远不会知道。我减少了 HTML 列表以节省一些空间!

我已经完成了关于此的 Codecademy 类(class)，但似乎无法将其转化为实际有效的东西。

这个:

<script src="Apps.js"></script>

也存在于我的 Body 区域。

谢谢!

jack

Answer 1

更优雅的方式是这样的

var main = function() {
  var hide_classes = ['sportList', 'itemList']; //list of classes, used by data-hideclass attribute, can be extended
  $('.' + hide_classes[0]).show(); //show only first list
  for (var k = 1; k < hide_classes.length; k++) { //hide others
    var hide_class = hide_classes[k];
    $('.' + hide_class).hide();
  }

  $('.btn').click(function(e) {
    for (var i = 0; i < hide_classes.length; i++) { //loop over list of classes
      var hide_class = hide_classes[i];
      if ($(this).attr('data-hideclass') === hide_class) { //if button data-hideclass is equal
        $('.' + hide_class).show(); //show list
      } else {
        $('.' + hide_class).hide(); //otherwise hide
      }
    }
  })
}

$(document).ready(main);

/*Buttons*/

.btn {
  text-align: center;
  background: #551A8B;
  background-image: -webkit-linear-gradient(top, #551A8B, #551A8B);
  background-image: -moz-linear-gradient(top, #551A8B, #551A8B);
  background-image: -ms-linear-gradient(top, #551A8B, #551A8B);
  background-image: -o-linear-gradient(top, #551A8B, #551A8B);
  background-image: linear-gradient(to bottom, #551A8B, #551A8B);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Verdana, sans-serif;
  color: #fff;
  font-size: 18px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  margin-left: 50px;
  margin-right: 50px;
}
.btn.active {
  background: #808333;
  background-image: -webkit-linear-gradient(top, #808080, #808080);
  background-image: -moz-linear-gradient(top, #808080, #808080);
  background-image: -ms-linear-gradient(top, #808080, #808080);
  background-image: -o-linear-gradient(top, #808080, #808080);
  background-image: linear-gradient(to bottom, #808080, #808080);
  text-decoration: none;
  color: #551A8B;
}
.btn:hover {
  background: #808080;
  background-image: -webkit-linear-gradient(top, #808080, #808080);
  background-image: -moz-linear-gradient(top, #808080, #808080);
  background-image: -ms-linear-gradient(top, #808080, #808080);
  background-image: -o-linear-gradient(top, #808080, #808080);
  background-image: linear-gradient(to bottom, #808080, #808080);
  text-decoration: none;
  color: #551A8B;
}
.buttonArea {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.buttonArea .container {
  position: relative;
  top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Button Area-->
<div class="buttonArea">
  <div class="container">
    <div class="row">
      <div class="btn" data-hideclass="sportList">Choose By Sport</div>
      <div class="btn" data-hideclass="itemList">Choose by Item</div>
      <!--data-hideclass will just show only div with that class-->
    </div>
  </div>
</div>

<!--Sport List-->
<div class="sportList">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul style="list-style-type:none">
          <li>American Football</li>
          <li>Basketball</li>
          <li>Cricket</li>
          <li>Cycling</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!--Item List-->
<div class="itemList">
  <!--item class is added-->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul style="list-style-type:none">
          <li>Headwear</li>
          <li>T-shirts</li>
          <li>Gloves</li>
          <li>Tracksuit Bottoms</li>
        </ul>
      </div>
    </div>
  </div>
</div>

请注意，如果需要，您可以通过这种方式扩展它并添加更多列表。仔细阅读js代码中的注释即可