Question

我希望在点击li时更改内容但内容正在淡化但不会更改。我可以知道我的编码结构是错误的吗？

DBMS_OUTPUT.PUTLINE();

https://jsfiddle.net/08x9wgmr/4/

Answer 1

首先获取每个锚点的data-page值需要使用$(this)，然后您可以隐藏所有.slide然后fadeIn()目标，如下所示。此外，您可以使用class函数来代替使用hide()进行隐藏。

＆＃13;

$(".slide-button li a").on('click', function() {
  var page = $(this).attr('data-page');
  //--------------^ Use $(this)
  console.log(page);
  $(".slide-container .slide").hide();
  $(".slide-container .slide[data-page='" + page + "']").fadeIn(600);
});

＆＃13;

.slide-container .slide.hide {
  display: none;
}

.slide {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-container">
  <div class="slide quote-1" data-page="slide-1">
    <div class="inner-content">
      <h5>Slide 1</h5>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</h1>
    </div>
  </div>
  <div class="slide quote-2 hide" data-page="slide-2">
    <div class="inner-content">
      <h5>Slide 2</h5>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</h1>
    </div>
  </div>
  <div class="slide quote-3 hide" data-page="slide-3">
    <div class="inner-content">
      <h5>Slide 3</h5>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</h1>
    </div>
  </div>
</div>
<ul class="slide-button">
  <li><a href="#/" data-page="slide-1">slide 1</a></li>
  <li><a href="#/" data-page="slide-2">slide 2</a></li>
  <li><a href="#/" data-page="slide-3">slide 3</a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

如何通过jquery创建数据点击DIV内容更改淡出效果？

1 个答案: