Как разрешить пользователю выбирать номер страницы?

Question

Я добавил информацию в некоторые поля, которые имеют атрибут «float».

Содержимое всех этих полей слишком велико, чтобы вставляться на веб-страницу, поэтому я хочу поместить эти поля на разные страницы и позволить пользователю выбрать, какую страницу он хочет просмотреть.

например: Выберите страницу: 1 2 3 ... (последняя страница)

Содержание этих 'страниц' должен быть в подразделениях.

Для справки см мой код CSS:

.clear { 
clear: both; 
} 

#over-ons .imagebox, 
#over-ons .contentbox 
{ 
background-color: #C4C4A6; 
float: left; 
margin: 0 10px 40px 0; 
padding: 10px; 
border: 2px solid black; 
} 

#over-ons .imagebox { 
width: 100px; 
text-align: center; 
} 

#over-ons .contentbox { 
width: 200px; 
} 

Кроме того, увидеть мой HTML-код из «коробки» я упомянул:

<div class="imagebox"><img src="media/images/overons/bas.png" /></div> 
<div class="contentbox"> 
    Function: blablablabla<br /> 
    Name: blablabla<br /> 
    City: Breda<br /> 
    Education: HBO Informatica<br /> 
</div> 

<div class="clear"></div> 

Как создать возможность, чтобы позволить пользователю просмотреть 3 разных поля, в зависимости от номера страницы, который он хочет видеть?

Edit:

Мое текущее решение выглядит так, только ничего не происходит, когда я нажимаю 'страница 2':

<?php 
//Vraag pagina op 
$page = 1; 
if (isset($_POST['page']) && is_numeric($_POST['page'])) 
$page = $_POST['page']; 
?> 

<? if ($page == 1) { ?> 
<div class="imagebox"><img src="media/images/overons/pieter.png" /></div> 
<div class="contentbox"> 
    Functie: Bedrijfsleider<br /> 
    Naam: Pieter<br /> 
    Stad: Deurne<br /> 
    Opleiding: HBO Informatica<br /> 
</div> 

<div class="clear"></div> 

<div class="imagebox"><img src="media/images/overons/patrick.png" /></div> 
<div class="contentbox"> 
    Functie: Verkoper<br /> 
    Naam: Patrick<br /> 
    Stad: Roosendaal<br /> 
    Opleiding: HBO Bedrijfskundige Informatica<br /> 
</div> 

<div class="clear"></div> 

<div class="imagebox"><img src="media/images/overons/rick.png" /></div> 
<div class="contentbox"> 
    Functie: Ontwikkelaar<br /> 
    Naam: Rick Gommers<br /> 
    Stad: Oosterhout<br /> 
    Opleiding: HBO Informatica<br /> 
</div> 

<div class="clear"></div> 
<? } 
else if ($page == 2) { ?> 
<div class="imagebox"><img src="media/images/overons/bas.png" /></div> 
<div class="contentbox"> 
    Functie: Salesmanager<br /> 
    Naam: Bas<br /> 
    Stad: Breda<br /> 
    Opleiding: HBO Informatica<br /> 
</div> 

<div class="clear"></div> 

<div class="imagebox"><img src="media/images/overons/robbert.png" /></div> 
<div class="contentbox"> 
    Functie: Administrateur<br /> 
    Naam: Robbert Tuerlings<br /> 
    Stad: Goirle<br /> 
    Opleiding: HBO Bedrijfskundige Informatica<br /> 
</div> 

<div class="clear"></div>  

<div class="imagebox"><img src="media/images/overons/timothee.png" /></div> 
<div class="contentbox"> 
    Functie: Implementatie Technicus<br /> 
    Naam: Timothee<br /> 
    Stad: Breda<br /> 
    Opleiding: HBO Informatica<br /> 
</div> 

<div class="clear"></div> 
<? } 
else { ?> 
<div class="contentbox"> 
You didn't select a proper page! 
</div> 
<? } ?> 

Answer 1

Представьте, что ваша текущая страница называется index.php. Поэтому в первую очередь необходимо создать ссылки на свои страницы в вашем HTML, как следующие:

<a href="index.php?page=1">Page 1</a> 
<a href="index.php?page=2">Page 2</a> 
<a href="index.php?page=3">Page 3</a> 

И для ясного кода вы можете просто поместить содержимое ваших «коробок» в массиве, а затем выводит соответствующая запись на странице:

<?php 
    $content = array{ "Page 1 data", "Page 2 data", "Page 3 data" }; 

    //Fetch the page 
    $page = 1; 
    if (isset($_GET['page']) && is_numeric($_GET['page'])) 
     $page = $_GET['page']; 
?> 
<div class="contentbox"> 
    <? echo $content[($page - 1)]; ?> 
</div> 

Другое решение (менее легко читать и поддерживать, но легче, если содержание действительно сложно), вы можете просто принести номер страницы и в обычном if else дисплее коробки они просили ,

<?php 
    //Fetch the page 
    $page = 1; 
    if (isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0) 
     $page = $_GET['page']; 
?> 

<? if ($page == 1) { ?> 
<div class="contentbox"> 
    Your first box for page 1 
</div> 
<? } 
    else if ($page == 2) { ?> 
<div class="contentbox"> 
    Your second box for page 2 
</div> 
<? } 
    else if ($page == 3) { ?> 
<div class="contentbox"> 
    Your third box for page 3 
</div> 
<? } 
    else { ?> 
<div class="contentbox"> 
    You didn't select a proper page! 
</div> 
<? } ?> 

Но у вас есть 1001 способ сделать это. Это действительно зависит от ваших потребностей и того, как вы хотите это сделать. Чем больше вы hardcode, тем более уродливым код обычно получает. ;-)

Answer 2

Один из способов состоит в том, чтобы иметь все разделы на странице и сделать только один видимый, на который пользователь нажал ... Чтобы сделать это, вы можете сделать все 3 дивы и по умолчанию сделать их скрытыми и Javascript trigget действия ...

Другой способ заключается в буферизации вывода в PHP, чтобы достичь этого:

ob_start(); // begin collecting output 

include 'myfile.php'; 

$result = ob_get_clean(); // retrieve output from myfile.php, stop buffering 

$ результат будет содержать текст ..

Первый способ preety легкий один большинство людей его используют..B ut, поскольку вы определенно сказали, что создали все отдельные страницы для всех 3 div, мне пришлось добавить метод php.