禁用jQuery中的非活动切换

Question

我有以下功能代码。但是，我想知道如何禁用切换按钮。我总是希望我的底部导航条图标活动，其各自的内容应该显示在主部分。如果我单击活动导航条图标(切换)，它将不会被停用。

提前感谢您的帮助！

$(document).ready(function() {
  // only show menu-1
  $('.menu-1').click(function() {
    if ($('.menu-2, .menu-3').hasClass('active')) {
      $('.menu-2, .menu-3').removeClass('active');
            $('.content-2, .content-3').removeClass('active');
    }

    $('.menu-1').toggleClass('active');
    $('.content-1').toggleClass('active'); 
  });

  // only show menu-2
    $('.menu-2').click(function() {
    if ($('.menu-1, .menu-3').hasClass('active')) {
      $('.menu-1, .menu-3').removeClass('active');
            $('.content-1, .content-3').removeClass('active');
    }

    $('.menu-2').toggleClass('active');
    $('.content-2').toggleClass('active'); 
  });

  // only show menu-3
    $('.menu-3').click(function() {
    if ($('.menu-2, .menu-1').hasClass('active')) {
      $('.menu-2, .menu-1').removeClass('active');
            $('.content-2, .content-1').removeClass('active');
    }

    $('.menu-3').toggleClass('active');
    $('.content-3').toggleClass('active'); 
  });

});

.container {
  margin: 0 auto;
  background-color: #eee;
  border: 1px solid lightgrey;
  width: 20vw;
  height: 90vh;
  font-family: sans-serif;

  position: relative;
}

header {
  background-color: lightgreen;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}

.bottom-navbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px 0;
  overflow: hidden;
  background-color: lightgreen;
  border-top: 1px solid var(--color-grey-dark-3);
  z-index: 50;

  display: flex;
  justify-content: space-between;

      > a {
      display: block;
      color: green;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      padding: 0 10px;

      &.active {
        color: black;
      }
    }
}

.menu-1.active,
.menu-2.active,
.menu-3.active {
  color: black;
}

.content-1,
.content-2,
.content-3 {
  display: none;
}

.content-1.active,
.content-2.active,
.content-3.active {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="container">
  <header>My header</header>
  <div class="main-content">
    <div class="content-1">House content</div>
    <div class="content-2">Map content</div>
    <div class="content-3">Explore content</div>
  <div class="bottom-navbar">
    <a href="#" class="menu-1"><i class="fa fa-home"></i></a>
    <a href="#" class="menu-2"><i class="fa fa-map"></i></a>
    <a href="#" class="menu-3"><i class="fa fa-search"></i></a>
  </div>
</div>

如果你觉得更容易，这里是我的CodePen：https://codepen.io/fergos2/pen/vYYaRzN

Answer 1

您可以使用toggleClass()代替addClass()：https://codepen.io/vladanme/pen/LYYBrqJ

$(document).ready(function() {
  // only show menu-1
  $('.menu-1').click(function() {
    if ($('.menu-2, .menu-3').hasClass('active')) {
      $('.menu-2, .menu-3').removeClass('active');
            $('.content-2, .content-3').removeClass('active');
    }

    $('.menu-1').addClass('active');
    $('.content-1').addClass('active'); 
  });

  // only show menu-2
    $('.menu-2').click(function() {
    if ($('.menu-1, .menu-3').hasClass('active')) {
      $('.menu-1, .menu-3').removeClass('active');
            $('.content-1, .content-3').removeClass('active');
    }

    $('.menu-2').addClass('active');
    $('.content-2').addClass('active'); 
  });

  // only show menu-3
    $('.menu-3').click(function() {
    if ($('.menu-2, .menu-1').hasClass('active')) {
      $('.menu-2, .menu-1').removeClass('active');
            $('.content-2, .content-1').removeClass('active');
    }

    $('.menu-3').addClass('active');
    $('.content-3').addClass('active'); 
  });





});

Answer 2

您可以使用此jQuery代码。任何人都可以加强这一点。

       $(document).ready(function() {



$('.bottom-navbar a').click(function(){
    var cls = $(this).attr('class');
    var lastchr = cls.substr(cls.length - 1);
    $(this).siblings('a').removeClass('active');
    $(this).addClass('active');
    $("div[class^='content-'],div[class*=' content-']").removeClass('active');
    $('.content-'+ lastchr).addClass('active');
   })  


});

Answer 3

使用addClass()而不是toggleClass()。

看起来您已经有了清除非活动按钮的代码。因此，您只剩下要保持活动的按钮。

[..]
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
[..]

[..]
$('.menu-2').addClass('active');
$('.content-2').addClass('active'); 
[..]

[..]
$('.menu-3').addClass('active');
$('.content-3').addClass('active'); 
[..]