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

How to call and hide lists using two buttons - using Javascript HTML CSS?

本文关键字：列表 隐藏 使用 Javascript CSS HTML 调用 何使用 按钮 两个      更新时间：2023-09-26

我真的很难掌握使用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关于这方面的课程，但似乎无法将其转化为实际有效的东西。

: 

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

也存在于我的Body区域。

谢谢!

杰克

更优雅的方式是这样的

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代码中的注释

相关文章：