простейшее слайд-шоу с использованием html, css переключение видимости каждого тега div - PullRequest
Новая
       13

простейшее слайд-шоу с использованием html, css переключение видимости каждого тега div

0 голосов
/ 22 февраля 2011

У меня есть несколько тегов div, содержащих простое содержимое html / css, и мне нужен простой способ для зрителя щелкнуть ссылку «Слайд 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, можем ли мы справиться и с этим делом.

Ответы [ 2 ]

2 голосов
/ 22 февраля 2011

Основной поток, когда пользователь щелкает ссылку, должен быть:

  1. Скрыть все div с классом «slide».
  2. Показать div с идентификатором «slideX» (где 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>

Надеюсь, это поможет вам выбрать правильный путь.

1 голос
/ 22 февраля 2011
...