Question

我尝试使用此代码点击不同的部分时显示不同的内容：

<style>
.content1 {display:none;}
.content2 {display:none;}
.content3 {display:none;}
</style>


<ul class="sidebar">
 <a href=".content1"><li>Link1</li></a>
 <a href=".content2"><li>Link2</li></a>
 <a href=".content3"><li>Link 3</li></a>
</ul>
<div class="content1 toggle"></div>
<div class="content2 toggle"></div>
<div class="content3 toggle"></div>

结合这个jQuery：

$(".sidebar a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});

哪个工作正常，但我试图做一个幻灯片动画，这样一旦点击.content2的链接，.content1就会向上滑动，而.content2会替换它等等。

Answer 1

只需调用.slideUp隐藏元素，.sideDown隐藏元素，详细了解jQuery效果：https://api.jquery.com/category/effects/

JavaScript的：

$(".sidebar a").click(function(e){
  e.preventDefault();
  var toShow = $(this).attr('href');

  $(".toggle").slideUp();
  $(toShow).slideDown();
});

CSS

.toggle { width: 100%; height: 100px; }
.content1.toggle { background: #ff0000; }
.content2.toggle { background: #00ff00; }
.content3.toggle { background: #0000ff; }

JSFiddle：https://jsfiddle.net/a827Lmuv/

加成

切换active类以通过CSS控制动画

的JavaScript

$(".sidebar a").click(function(e){
  e.preventDefault();
  var toShow = $(this).attr('href');

  $(".toggle").removeClass("active");
  $(toShow).addClass("active");
});

CSS

.toggle { width: 100%; height: 0; }
.content1.toggle { background: #ff0000; }
.content2.toggle { background: #00ff00; }
.content3.toggle { background: #0000ff; }

.toggle {
  -webkit-transition: .3s;
  transition: .3s;
}
.toggle.active { height: 100px; }

JSFiddle：https://jsfiddle.net/a827Lmuv/1/

使用幻灯片动画显示链接点击时的div

1 个答案:

加成