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>

我需要的是用於鏈接的切換 function。 例如，如果您再次單擊一個鏈接，則內容應該被隱藏。 以 ».toggle« 代替 ».click« 不起作用。 總的來說：有沒有更簡單的方法來編碼？ 還是我必須像我一樣將它如此詳細地鏈接在一起？

非常感謝您的幫助！ <3

Answer 1

將數據目標和 commom class 添加到鏈接：

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

一個常見的 class 到文本：

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

默認情況下將其隱藏，並添加visible的 class：

.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>