在 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

您可以使用 addClass() 而不是 toggleClass()： 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

使用 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'); 
[..]

Answer 3

您可以使用此 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');
   })  


});

在 jQuery 中禁用非活动切换

Disabling inactive toggle in jQuery

javascript

css

jquery

toggle