时间戳

首页 > 解决方案 > jQuery：文本切换应始终只显示一个文本

javascript - jQuery：文本切换应始终只显示一个文本

问题描述

我用 jQuery 编写了一个文本切换功能。一般来说，它有效。但是：始终应显示一个文本。一开始，它应该是第一个文本。如果单击第二个链接，则只应显示第二个文本，依此类推。

怎么可能编码呢？

$(".link").click(function() {
  $(this).toggleClass("active-link");
  var target = $($(this).data("target"));
  target.toggleClass("show");
})
* {
  margin: 0;
  padding: 0;
  font-size: 3vw;
}

.text {
  margin-top: 20px;
  display: none;
}

.show {
  display: block;
}

.active-link {
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="link show" data-target="#one">One</div>
<div class="link" data-target="#two">Two</div>
<div class="link" data-target="#three">Three</div>

<div class="text" id="one">This is One. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="text" id="two">This is Two. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="text" id="three">This is Three. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

将非常感谢您的帮助！祝你有美好的一天！<3

标签： javascriptjquery

解决方案

你几乎拥有它！查看代码中的注释

$(".link").click(function() {
  $(this).toggleClass("active-link");
  
  $('.text').addClass("hide"); /* added this line */
  $(".link").removeClass('active-link'); /* added this line */
  $(this).addClass('active-link'); /* added this line */
  
  var target = $($(this).data("target"));
  target.removeClass("hide"); /* added this line */
  target.addClass("show");
});

(function(){ // added this function
  // this code will be run on page load and then never again
  $('#one.text').addClass("show"); 
})(); // this is called IIFE. You could also just add the above line $('#one.text').addClass("show"); at the end of your javascript, but this is the nice way of doing it.
* {
  margin: 0;
  padding: 0;
  font-size: 3vw;
}

.text {
  margin-top: 20px;
  display: none;
}

.show {
  display: block;
}

.active-link {
  text-decoration: underline;
}

/* added the next 2 rules */
.link {
  cursor: pointer;
}

.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="link active-link" data-target="#one">One</div>
<div class="link" data-target="#two">Two</div>
<div class="link" data-target="#three">Three</div>

<div class="text" id="one">This is One. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="text" id="two">This is Two. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="text" id="three">This is Three. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

推荐阅读