Подсвечивание кнопок постраничной навигации

@batyna · Регистрация: 07.05.2019

Студворк — интернет-сервис помощи студентам

Уважаемые форумчане. Помогите пожалуйста разобраться начинающему) Что не так я делаю. у меня при клике на ссылку (постраничной навигации), когда она становится активной, не меняется ее фон (должен быть зеленый), он сбрасывается.
Все данные:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
    include $_SERVER['DOCUMENT_ROOT'] . '/includes/connect.inc.php';
 $sql = 'SELECT COUNT(*) AS sumzakaz FROM test';
    $s = $pdo->prepare($sql);
    $s->execute();
    $row = $s->fetch();
$_SESSION['sumzakaz']= $row['sumzakaz'];
if (isset($_GET['page'])){
    $page = $_GET['page'];
}else $page = 1;
 
$kol = 10;  //количество записей для вывода
$art = ($page*$kol)-$kol; // определяем, с какой записи нам выводить
var_dump($art);
var_dump($kol);
var_dump($page);
var_dump($_GET['page']);
    try {
        $sql = 'SELECT id, name, price, value, userid FROM test
        WHERE userid = :userid  ORDER BY `id` desc LIMIT '.$art.','.$kol.' ';
        $result = $pdo->prepare($sql);
        $result->bindValue(':userid', '1');
 
        $result->execute();
    } catch (PDOException $e) {
 
        $error = 'Ошибка извлечении test from bd.';
        include 'error.html.php';
        exit();
    }
$str_pag = ceil($_SESSION['sumzakaz'] / $kol);
var_dump($str_pag);
foreach ($result as $row) {
    $zakazed[] = array('id' => $row['id'],'name' => $row['name'],'price' => $row['price'], 'value' => $row['value']);
 
}
 
include 'form.html.php';

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<table class="table">
    <tr class="hat">
        <th id="id">Номер</th>
        <th id="name"><p>Название</p></th>
        <th id="price"><p>Цена</p></th>
        <th id="value"><p>Количество</p></th>
    </tr>
    <?php foreach ($zakazed as $zakaz):?>
            <tr>
            <div><td style="text-align: center;">
                    #<?php echo($zakaz['id']); ?>
                </td></div>
            <div><td>
                    <?php echo($zakaz['name']); ?>
                </td></div>
                <div><td>
                        <?php echo($zakaz['price']); ?> руб.
                    </td></div>
                <div><td>
                        <?php echo($zakaz['value']); ?> шт.
                    </td></div>
    <?php endforeach; ?>
</table>
<ul class="pagination">
<?php
for ($i = 1; $i <= $str_pag; $i++){
echo "<li class='active'><a  href=?page=".$i."> Страница ".$i." </a></li>";
}?></ul>
</body>
</html>
<br>sum<?php var_dump($_SESSION['sumzakaz']);?>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #2a6496;
  background-color: #eee;
  border-color: #ddd;
}
 
.pagination > .active > a:hover
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #428bca;
  border-color: #428bca;
}
 
.pagination > .active > a:active,
.pagination > .active > span:active {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #2bca12;
  border-color: #31ca0d;
}
 
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

@batyna · 10.10.2019, 20:24 **[ТС]**

=) Спасибо=) Вроде разобрался=) через условие сделал стили=) можно тему закрывать вопрос решен=)

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@batyna 0 / 0 / 0 Регистрация: 07.05.2019 Сообщений: 6
	10.10.2019, 20:24 [ТС]
	=) Спасибо=) Вроде разобрался=) через условие сделал стили=) можно тему закрывать вопрос решен=) 0