javascript - 在jQuery中禁用非活动切换(Disabling inactive toggle in jQuery)

Question

I have the following functional code.(我有以下功能代码。)

However, I would like to know how I can disable toggle buttons.(但是，我想知道如何禁用切换按钮。) I always want to have one of my bottom navbar icons active and its respective content should be shown in the main section.(我一直想激活底部导航栏图标之一，并且其相应内容应显示在主要部分中。) If I click on the active navbar icon (the toggle) it wouldn't be deactivated.(如果单击活动的导航栏图标（切换按钮），则不会将其禁用。) Thanks in advance for your help!(在此先感谢您的帮助！) $(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> If you find it easier, here's my CodePen : https://codepen.io/fergos2/pen/vYYaRzN(如果您觉得更简单，这是我的CodePen ： https : //codepen.io/fergos2/pen/vYYaRzN)   ask by Fergo translate from so

Answer 1

You can use this jQuery code.(您可以使用此jQuery代码。)

Anyone can enhance that.(任何人都可以增强它。) $(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'); }) });