使用 html、css 切换每个 div 标签的可见性的最简单幻灯片

Question

我有几个包含简单 html/css 内容的 div 标签，我需要一种简单的方法让查看者单击链接“幻灯片 1”，该幻灯片的第一个 div 标签变得可见，然后他们单击幻灯片 2，第二个 div 标签是可见，等等。

我尝试在 Dreamweaver 中使用时间线，但这似乎太过分了，而且太复杂了。引入整个 YUI 库也是如此。我们只需要一个基本的、强力的方法，即在单击链接时使其可见/不可见。

所以设置是

     <LINK_SLIDE1>  <LINK_SLIDE2>  <LINK_SLIDE3>
<div class="slide" id="slide1">
  <p>Welcome etc etc etc</p>
</div
<div class="slide" id="slide2">
  <p>Overview etc etc etc</p>
</div
<div class="slide" id="slide3">
  <p>Summary etc etc</p>
</div

我正在寻找一些关于如何实现链接来打开/关闭每个 div 标签的可见性的提示。我担心的一个问题是，如果用户没有启用 JavaScript，我们也可以处理这种情况吗？

Answer 1

用户单击链接时的基本流程应该是：

1. 隐藏所有带有“slide”类的 div。
2. 显示 ID 为“slideX”的 div（其中 X 由单击的链接确定）。

您可以通过向每个链接添加事件侦听器，然后确定单击了哪个链接以及显示哪张幻灯片来实现此目的。对于此类问题，使用链接中的 rel 属性是存储此信息的快速方法。

这是一个不使用任何框架的示例，我还没有对其进行测试。仅举一个例子。

var slides = document.getElementsByClassName('slide');
function showSlide(e) {
    var toShow = e.target.getAttribute('rel');
    for (var i = 0, len = slides.length; i < len; i++) {
        slides[i].style.display = 'none';
    }
    document.getElementById(toShow).style.display = 'block';
    e.preventDefault();
    return false;
}

var links = document.getElementsByClassName('slide-link');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', showSlide, false);
}

以及与之配套的 HTML 示例：

<a href="#" class="slide-link" rel="slide1">Welcome</a>
<a href="#" class="slide-link" rel="slide2">Overview</a>

<div class="slide" id="slide1">
    <p>Welcome etc etc etc</p>
</div>
<div class="slide" id="slide2">
    <p>Overview etc etc etc</p>
</div>

希望这能让您走上正轨。

Answer 2

有一个名为 S5 的非常棒的预构建开源实现。看看吧，你可能会非常喜欢它。