选项卡式内容不显示默认内容，并且单击时不添加类

Question

我有一个选项卡式模块，目前有三个选项卡。

工作原理：用户点击carousel_element，它将在该div中显示carousel_hidden-text到另一个称为carousel_quote的div。

我不确定原因：

1. 默认内容尚未预先存储在carousel_quote中。即在下面的演示中，您可以看到红色框为空。我希望它默认显示第二个carousel_element（lorum ipsum 2）。
2. 同样，默认情况下，我希望第二个carousel_element的边框显示为红色（因此表明此选项卡处于活动状态）。为此，我有jQuery('."carousel_element:nth-child(2)').addClass("carousel_selected");，但它似乎没有做任何事情？当然，如果单击任何其他选项卡，我要从那里删除carousel_selected并将其添加到适当的carousel_element。

代码：

jQuery(document).on('click', '.carousel_element', function() {
  jQuery('.carousel_quote').html(jQuery(this).find('.carousel_hidden-text').html());
  jQuery('."carousel_element:nth-child(2)').addClass("carousel_selected");
  jQuery('.carousel_element').removeClass('carousel_selected');
  jQuery(this).addClass('carousel_selected');
});

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding: 0;
  margin-top: 0;
  position: relative;
  color: #002f33;
  width: 100vw;
}

.carousel {
  display: flex;
  flex-direction: row;
}

.carousel_element {
  border-bottom: solid 1px #999;
  height: 6em;
  width: 100%;
  margin: 0 5px;
}

.carousel_element .carousel_hidden-text {
  /* display: none; */
  text-align: center;
}

.carousel_container .carousel_quote {
  margin-left: auto;
  margin-right: auto;
  height: 10em;
  width: 75%;
  text-align: center;
  margin-top: 1em;
  border: 1px solid red;
}

.carousel_selected {
  border-color: red!important;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container carousel_container">
  <div class="wrapper">

    <div class="carousel">
      <div class="carousel_element">
        <div class="carousel_hidden-text">
          <p>Lorum Ipsum 1 </p>
          <p class="carousel_reference">Author1 </p>
        </div>
      </div>
      <div class="carousel_element">
        <div class="carousel_hidden-text">
          <p>Lorum Ipsum 2</p>
          <p class="carousel_reference">Author 2</p>
        </div>
      </div>
      <div class="carousel_element">
        <div class="carousel_hidden-text">
          <p>Lorum Ipsum 3</p>
          <p class="carousel_reference">Author 3</p>
        </div>
      </div>
    </div>
    <!-- .carousel end -->
    <div class="carousel_quote"></div>
  </div>
</div>

Answer 1

对于负载添加此功能

$(document).ready(function () {
  $('.carousel_element:nth-child(2)').addClass("carousel_selected");
   $('.carousel_quote').html($('.carousel_element:nth-child(2)').find('.carousel_hidden-text').html());
});

尝试以下解决方案，它将起作用

$(document).ready(function () {
  $('.carousel_element:nth-child(2)').addClass("carousel_selected");
   $('.carousel_quote').html($('.carousel_element:nth-child(2)').find('.carousel_hidden-text').html());
   
$('.carousel_element').click(function() {
  $('.carousel_quote').html($(this).find('.carousel_hidden-text').html());
 
  //$('.carousel_element').removeClass('carousel_selected');
$(this).addClass("carousel_selected").siblings().removeClass("carousel_selected");

});
});

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding: 0;
  margin-top: 0;
  position: relative;
  color: #002f33;
  width: 100vw;
}

.carousel {
  display: flex;
  flex-direction: row;
}

.carousel_element {
  border-bottom: solid 1px #999;
  height: 6em;
  width: 100%;
  margin: 0 5px;
}

.carousel_element .carousel_hidden-text {
  /* display: none; */
  text-align: center;
}

.carousel_container .carousel_quote {
  margin-left: auto;
  margin-right: auto;
  height: 10em;
  width: 75%;
  text-align: center;
  margin-top: 1em;
  border: 1px solid red;
}

.carousel_selected {
  border-color: red !important;
}

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

<div class="container carousel_container">
  <div class="wrapper">

    <div class="carousel">
      <div class="carousel_element">
        <div class="carousel_hidden-text">
          <p>Lorum Ipsum 1 </p>
          <p class="carousel_reference">Author1 </p>
        </div>
      </div>
      <div class="carousel_element">
        <div class="carousel_hidden-text">
          <p>Lorum Ipsum 2</p>
          <p class="carousel_reference">Author 2</p>
        </div>
      </div>
      <div class="carousel_element">
        <div class="carousel_hidden-text">
          <p>Lorum Ipsum 3</p>
          <p class="carousel_reference">Author 3</p>
        </div>
      </div>
    </div>
    <!-- .carousel end -->
    <div class="carousel_quote"></div>
  </div>
</div>