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

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

Answer 1

用户点击链接时的基本流程应为：

使用“幻灯片”类隐藏所有div。
显示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

有一个awesome, pre-built, open-source implementation called S5。看一下，你可能真的很喜欢它。

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

2 个答案: