html - 使用 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>

希望这能让您走上正轨。