Как мне пройти через 5 различных дивов с помощью одной кнопки

Question

У меня есть 5 делений с идентификаторами;#one, #two, #three, #four и #five.У меня есть навигационное меню, связанное с каждым div, вот так:

  <ul>
     <li><a href="#one">ONE</a></li>
     <li><a href="#two">TWO</a></li>
     <li><a href="#three">THREE</a></li>
     <li><a href="#four">FOUR</a></li>
     <li><a href="#five">FIVE</a></li>
  </ul>

, где каждый div представляет одну страницу на моем веб-сайте, ul работает отлично, но есть ли способ иметь одну кнопку, например "Кнопка «Далее», которая переходит на страницу 2 при нажатии и при повторном нажатии, переходит на страницу 3 и т. д., предпочтительно с использованием некоторого вида jquery или даже javascript

Answer 1

Я отвечу, исходя из предположения, что это чисто теоретическое упражнение и учитывая только ту информацию, которую вы предоставили.Обратите внимание, что есть более эффективные способы выполнения того, что вы просите, как указано в первом комментарии.

Однако при условии, что, как вы говорите, у вас есть идентичное навигационное меню на каждой странице, и что,как вы говорите, каждый div находится на отдельной веб-странице, я предлагаю вам продолжить существующую методологию и поместить кнопки «Назад» и «Далее» на каждой странице и вручную подключить ее к нужной странице.

Например, на странице с #one у вас будут кнопки, которые могут выглядеть следующим образом:

<a href="#">Previous</a><!-- does nothing.. because you're on the first page -->
<a href="#two">Next</a><!-- goes to page 2 -->

На последующих страницах вы жестко закодируете ссылки на другие страницы и наНа последней странице вы бы отключили кнопку «Далее» аналогично тому, как кнопка «Предыдущая» была отключена выше.

Сказав это.Вы можете разместить все элементы Div на одной веб-странице и показать / скрыть их с помощью JavaScript и CSS.Например:

<div id="one" style="display:block;">Div 1</div>
<div id="two" style="display:none;">Div 2</div>
<div id="three" style="display:none;">Div 3</div>
<script type="text/javascript">
function focusOnAParticularDiv(divId)
{
    switch(divId)
    {
        case 'one':
            document.getElementById('two').style.display = 'none';
            document.getElementById('three').style.display = 'none';
            document.getElementById('one').style.display = 'block';
            break;
        case 'two':
            // etc...
            break;
        case 'three':
            // etc...
            break;
    }
}
</script>

Затем можно вызвать эту функцию JS для события onClick следующих / предыдущих кнопок.

<input type="button" text="Next" onclick="focusOnAParticularDiv('two');" />

Или что-то в этом роде ...

Вы можете использовать горячие клавиши JQuery, если хотите.

В качестве альтернативы вы можете использовать элемент управления ASP.NET Wizard:)

Как уже упоминалось в некоторых других комментариях, вы также можете создатьdiv, за которым находится пользователь, на стороне сервера, что позволит избежать отправки ВСЕХ div-ов клиенту по первому запросу (это ускорит первый запрос пользователя).Это будет означать, что вам не нужен JavaScript, но также будет означать, что каждый раз, когда пользователь нажимает кнопку, страница будет уничтожена и воссоздана на сервере и отправлена ​​обратно клиенту (полный цикл), который будет иметьвлияние на количество попаданий, которые получает ваш сервер.

Это действительно зависит от того, что вы ищете и каковы ваши критерии;следовательно, почему я попытался покрыть несколько основ для вас.

Answer 2

Что-то вроде

$(document).ready(function() {
  var links = [];
  var cnt=0;
  $("ul li a").each(function(i) {
    links[i] = this.href;
  });
    $("#next").click(function(e) {
      cnt++;
      if (cnt>=links.length) cnt=0;
      location.hash=links[cnt].split("#")[1];
      e.preventDefault();
    });
});

Answer 3

JQuery имеет событие триггера.Вы можете инициировать событие клика по вашим ссылкам, когда пользователь нажимает следующую или предыдущую кнопку.