水平标签和使用Javascript显示内容

Question

试图弄清楚为什么我的水平制表不起作用。我可以显示内容，但是无论单击哪个链接，它始终是.test_content-> .test_tabbed_content-> .pages / test1.html下的test1内容。我相信代码有问题，或者我浏览了一下还是完全忘了。

编辑代码以反映CSS

$(document).ready(
  function() {
    $(".tabbed_content").click(function() {
      $(".test_tabbed_content").show("slow");
      var val = $(this).find("a").attr('name');
      $("#" + val).show("slow");
    });
  });

@font-face {
  font-family: "Poppins";
  src: url("../Font/Poppins/Poppins-Regular.woff") format('woff');
  font-weight: 600;
}

html {
  width: 100%;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.test_main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.test_header {
  width: 100%;
  height: 3%;
  background: radial-gradient(circle at 0% 0%, #373b52, #252736 51%, #1d1e26);
}

.test_logo {
  width: 10%;
  height: 100%;
  background: inherit;
  float: left;
  display: inline;
}

.test_logo span {
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  padding-left: 1%;
  padding-top: 1.75%;
  float: left;
  display: inline;
}

.test_logo img {
  width: 1vw;
  height: auto;
  padding-left: 5%;
  padding-top: 1.75%;
  float: left;
  display: inline;
}

.test_tabs {
  width: 90%;
  height: 100%;
  background: inherit;
  float: left;
  display: inline;
}

.arrow_left,
.arrow_right {
  font-size: 2vh;
  color: #ef0003;
}

.arrow_left:hover,
.arrow_right:hover {
  color: #fff;
}

.arrow_cont_left {
  width: 1.5%;
  height: 100%;
  float: left;
  display: inline;
  background: inherit;
  vertical-align: middle;
  text-align: center;
}

.arrow_button {
  cursor: pointer;
}

.arrow_cont_right {
  width: 1.5%;
  height: 100%;
  float: left;
  display: inline;
  background: inherit;
  vertical-align: middle;
  text-align: center;
}

.tabbed {
  width: 97%;
  height: 100%;
  background: inherit;
  float: left;
  display: inline;
  overflow-y;
  hidden;
  overflow-x: auto;
}

.tabbed_content {
  width: 5vw;
  height: 100%;
  background: #00afef;
  vertical-align: middle;
  text-align: center;
  float: left;
  display: inline;
}

.tabbed_button:hover {
  color: #ffffff;
  bottom-border: 1px solid red;
}

.tabbed_content span {
  vertical-align: middle;
  text-align: center;
  width: 75%;
  height: 100%;
  font-size: 1vh;
  background: inherit;
}

.tabbed_button {
  cursor: pointer;
}

.test_content {
  width: 100%;
  height: 97%;
  background: inherit;
}

.test_tabbed_content {
  display: none;
  width: 100%;
  height: 100%;
}

.external_object {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="test_main">
  <div class="test_header">
    <div class="test_logo">
      <span> Test</span><img src="../Media/test.png">
    </div>
    <div class="test_tabs">
      <a class="arrow_button">
        <div class="arrow_cont_left"><span class="arrow_left">&lt;</span></div>
      </a>
      <div class="tabbed">
        <div class="tabbed_content"><a class="tabbed_button" name="test1"><span>Test1</span></a></div>
        <div class="tabbed_content"><a class="tabbed_button" name="test2"><span>Test2</span></a></div>
      </div>
      <a class="arrow_button">
        <div class="arrow_cont_right"><span class="arrow_right">&gt;</span></div>
      </a>
    </div>
  </div>
  <div class="test_content">
    <div class="test_tabbed_content" id="test1"><object data="pages/test1.html" class="external_object"></object></div>
    <div class="test_tabbed_content" id="test2"><object data="pages/test2.html" class="external_object"></object></div>
  </div>

</div>