jQuery переключение пути навигации

Question

Я хочу закодировать путь навигации с помощью jQuery.

Вот как это выглядит в данный момент:

$("#one_link").click(function() {
  $("#categories").css("display", "block");
  $("#text_three").css("display", "none");
  $("#cats_text").css("display", "none");
  $("#text_two").css("display", "none");
});

$("#cats_link").click(function() {
  $("#cats_text").css("display", "block");
  $("#text_two").css("display", "none");
  $("#text_three").css("display", "none");
});

$("#two_link").click(function() {
  $("#text_two").css("display", "block");
  $("#categories").css("display", "none");
  $("#cats_text").css("display", "none");
  $("#text_three").css("display", "none");
});

$("#three_link").click(function() {
  $("#text_three").css("display", "block");
  $("#categories").css("display", "none");
  $("#cats_text").css("display", "none");
  $("#text_two").css("display", "none");
});

* {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 30px;
  line-height: 100%;
  cursor: default;
  font-family: Arial;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.column {
  border-right: 1px solid;
}

.column_content {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.column {
  display: none;
}

.column:first-child {
  display: block;
}

li:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">

  <div class="column">
    <div class="column_content">
      <ul>
        <li id="one_link">One</li>
        <li id="two_link">Two</li>
        <li id="three_link">Three</li>
      </ul>
    </div>
  </div>

  <div id="categories" class="column">
    <div class="column_content">
      <ul>
        <li id="cats_link">Cats</li>
      </ul>
    </div>
  </div>

  <div class="column" id="cats_text">
    <div class="column_content">
      <p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.</p>
    </div>
  </div>

  <div class="column" id="text_two">
    <div class="column_content">
      <p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
    </div>
  </div>

  <div class="column" id="text_three">
    <div class="column_content">
      <p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
    </div>
  </div>

</div>

Мне нужна функция переключения ссылок. Например, если вы нажмете одну ссылку во второй раз, контент должен быть скрыт. Взятие ».toggle« вместо ».click« не работает. И вообще: есть ли более простой способ это кодировать? Или я должен связать это так подробно, как я?

Буду очень признателен за любую помощь! <3 </p>

Answer 1

Добавьте объект data-target и commom class к ссылкам:

<li class="tablink" id="two_link" data-target="text_two">Two</li>

Класс commom к текстам:

<div class="column tabtext" id="text_two">

Сделайте это скрытым по умолчанию и добавьте visible класс:

.tabtext {
  opacity: 0;
  transition 0.2s;
}
.tabtext.visible {
  opacity: 1;
}

и показать / скрыть:

$("body").on("click", ".tablink", function(ev) {
  var target = $("#" + this.dataset.target);
  var show = !target.hasClass("visible"); // Only show if wasn't visible
  $(".tabtext.visible").removeClass("visible"); // Hide visible
  if (show) target.addClass("visible"); // Show the selected
});

$("body").on("click", ".tablink", function(e) {
  var target = $("#" + this.dataset.target);
  var show = !target.hasClass("visible");
  $(".tabtext.visible").removeClass("visible");
  $(".tabtext2.visible").removeClass("visible"); // Hide 2nd level as well
  if (show) target.addClass("visible");
});

$("body").on("click", ".tablink2", function(ev) {
  var target = $("#" + this.dataset.target);
  var show = !target.hasClass("visible");
  $(".tabtext2.visible").removeClass("visible");
  if (show) target.addClass("visible");
});

.tabtext,
.tabtext2 {
  opacity: 0;
  transition: 0.2s;
  display: none;
  position: absolute;
}

.visible {
  opacity: 1;
  display: inline-block;
}

* {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 100%;
  cursor: default;
  font-family: Arial;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
}

.column {
  border-right: 1px solid;
  visibility: visible;
}

.column_content {
  height: 100%;
  padding: 20px;
}

.column_content p {
  font-size: 12px;
}

.column:first-child {
  display: block;
}

li {
  z-index: 1
}

li:hover {
  cursor: pointer;
}

#categories {
  height: 100%;
}

#categories div {
  display: inline-block;
}

.tabtext2 {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">

  <div class="column">
    <div class="column_content">
      <ul>
        <li id="one_link" class="tablink" data-target="categories">One</li>
        <li id="two_link" class="tablink" data-target="text_two">Two</li>
        <li id="three_link" class="tablink" data-target="text_three">Three</li>
      </ul>
    </div>
  </div>

  <div class="texts">
    <div id="categories" class="column tabtext">
      <div class="column_content">
        <ul>
          <li id="cats_link" class="tablink2" data-target="cats_text">Cats</li>
        </ul>
      </div>
      <div class="column tabtext2" id="cats_text">
        <div class="column_content">
          <p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.</p>
        </div>
      </div>
    </div>

    <div class="column tabtext" id="text_two">
      <div class="column_content">
        <p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
      </div>
    </div>
    <div class="column tabtext" id="text_three">
      <div class="column_content">
        <p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
      </div>
    </div>
  </div>
</div>