如何显示使用锚标记链接的div？

Question

我想显示基于菜单标题被单击的div，当显示单击的div时，其他div被隐藏。我只显示了home div，并在代码中保留了默认值。

我尝试使用

let el = $(this).attr('href');
    $(el).toggle();

，但效果不理想。我想显示仅单击的div，默认情况下，当未单击任何菜单时，home div应该是可见的。

.content {
  height: 20px;
}

.inactive {
  display: none;
}

#home-content {
  background-color: red
}

#portfolio-content {
  background-color: blue;
}

#about-content {
  background-color: yellow;
}

#resume-content {
  background-color: green;
}

#contact-content {
  background-color: white;
}

<ul class="sidebar-menu-container">
  <li>
    <a class="sidebar-menu-item" href="#home-content">Home</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#about-content">About Me</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#resume-content">Resume</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
  </li>
  <li>
    <a class="sidebar-menu-item" href="#contact-content">Contact</a>
  </li>
</ul>
<div class="container">
  <div class="content" id="home-content">

  </div>
  <div class="content inactive"  id="about-content">

  </div>
  <div class="content inactive"  id="portfolio-content">

  </div>
  <div class="content inactive"  id="resume-content">

  </div>
  <div class="content inactive"  id="contact-content">

  </div>
</div>

Answer 1

尝试一下

func yourAVRecording() {
    // Haptic
    let generator = UISelectionFeedbackGenerator()
    generator.prepare()
    generator.selectionChanged()

    // Record after played Haptic (just give few time to let haptic done and then magic happen)
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
        // Do your AVFoundation stuffs whatever here
    }
}

$( ".sidebar-menu-item" ).click(function() {
  $(".content").hide();
  
  let el = $(this).attr('href');
  $(el).toggle();
  
});

#home-content {
  height: 200px;
  background-color: red
}

#portfolio-content {
  height: 200px;
  background-color: blue;
  display: none;
}

#about-content {
  height: 200px;
  background-color: yellow;
  display: none;
}

#resume-content {
  height: 200px;
  background-color: green;
  display: none;
}

#contact-content {
  height: 200px;
  background-color: white;
  display: none;
}

Answer 2

没关系，这对我有用：

$('.sidebar-menu-item').click(function () {
    let href = $(this).attr('href');
    $(".content").addClass("inactive");
    $(href).removeClass("inactive");
});