Как перемещаться по 5 разным divs с помощью одной кнопки

Question

У меня есть 5 divs с идентификаторами; #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> 

где каждый ДИВ представляет собой одну страницу на своем сайте, тем ули отлично работает, но есть способ может иметь одну кнопку, как на кнопку «Далее», который будет идти на страницу 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 --> 

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

Сказав это. Вы можете поместить все Divs на одну и ту же веб-страницу и показать/скрыть их с помощью 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 пользователь после на стороне сервера, что позволит избежать отправки ВСЕ дивы клиенту по первому запросу (это ускорит первый запрос пользователя). Это означало бы, что вам не нужен какой-либо JavaScript, но также означает, что каждый раз, когда пользователь нажимает кнопку, страница будет уничтожена и воссоздана на сервере и отправлена ​​обратно клиенту (полный раунд), который будет иметь влияет на количество посещений вашего сервера.

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

Answer 2

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

Answer 3

Что-то вроде

$(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(); 
    }); 
});