禁用 jQuery 中的非活动切换答案

【问题标题】：Disabling inactive toggle in jQuery禁用 jQuery 中的非活动切换
【发布时间】：2019-12-01 01:56:29
【问题描述】：

我有以下功能代码。但是，我想知道如何禁用切换按钮。我总是希望我的底部导航栏图标之一处于活动状态，并且其各自的内容应显示在主要部分中。如果我单击活动导航栏图标（切换），它不会被停用。

提前感谢您的帮助！

$(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

【问题讨论】：

根据您上面的示例，您可以在document.ready 调用之后立即设置您想要激活的任何元素。 $('.menu1').toggleClass('active'); $('.content-1').toggleClass('active'); 或者你可以模拟一个按钮点击，如果这样更好的话。 jQuery event trigger

标签： javascript jquery css toggle

【解决方案1】：

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


});

【讨论】：

【解决方案2】：

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





});

【讨论】：

我怎样才能让 menu-1 默认处于活动状态？在点击任何按钮之前，这里默认为空。只需显示 menu-1，内容就会重叠。
我更新了 codepen 以将 menu-1 设为默认值。您基本上需要在 HTML 中为这些元素添加活动类

【解决方案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'); 
[..]

【讨论】：