Показать tag span внутри текущей ссылки a

@sanchahous · Регистрация: 24.12.2013

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

Идея следующая. Есть пагинация со страницами. Изначально вся нумерация скрыта кроме 1 страницы. При клике должен отображаться номер только текущей страницы, вместе с CSS стилем.
Особо не обращайте внимание на верстку это Bootstrap. Основная задача я так понимаю тут заключается в Jquery.
HTML

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
                    <div class="col-lg-12 pagination">
                        <ul>
                            <li class="previous pull-left"><a href="#"></a></li>
                            <li class="separator pull-left"></li>
                            <li class="page-1 pull-left"><a href="#" tabindex="1"><span>1</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="2"><span>2</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="3"><span>3</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="4"><span>4</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="5"><span>5</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="6"><span>6</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="7"><span>7</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="8"><span>8</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="9"><span>9</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="10"><span>10</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="11"><span>11</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="12"><span>12</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="13"><span>13</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="14"><span>14</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="15"><span>15</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="16"><span>16</span></a></li>
                            <li class="page pull-left"><a href="#" tabindex="17"><span>17</span></a></li>
                            <li class="separator pull-left"></li>
                            <li class="next pull-left"><a href="#"></a></li>
                        </ul>
                    </div>

CSS

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
/*****************************GOODS-RIGHT-FORM-PAGINATION**********************/
 
.pagination {
    height: 47px;
 
}
 
.pagination ul {
    height: 39px;
 
}
 
.pagination ul li {
    line-height: 39px;
}
 
.pagination ul li a {
    display: block;
    height: 39px;
}
 
.pagination ul li.previous {
    background: url('img/1260/previ.png') 0px 0 no-repeat;
    width: 47px;
    height: 39px;
}
 
.pagination ul li.page {
    background-image: url('img/1260/page_bg.png'); 
    width: 27px;
    height: 39px; 
}
 
.pagination ul li.page-1 {
    background-image: url('img/1260/page_first.png'); 
    width: 27px;
    height: 39px; 
}
 
.pagination ul li.page a {
    display: block;
}
 
.pagination ul li.page a span {
    display: none;
}
 
.pagination ul li.page-1 a span {
    display: table;
}
 
.pagination ul li a span {
    display: table;
    margin: 0 auto;
    font-size: 12px;
    font-family: "Open Sans";
    color: #34495E;
    opacity: 0.3;
}
 
.pagination ul li.page a:hover, .pagination ul li a:focus  {
    background-image: url('img/1260/page_hover.png'); 
    width: 27px;
    height: 39px; 
    outline: 0;
}
 
.pagination ul li.separator {
    background-image: url('img/1260/separator.png');
    width: 2px;
    height: 39px;
}
 
.pagination ul li.next {
    background: url('img/1260/next.png') 0px 0 no-repeat;  width: 47px;  height: 39px;
 
}

Базовый Jquery код у меня на данный момент отображает всю нумерацию при клике. А нужно только для текущей ссылки

JavaScript
1
2
3
4
5
6
7
8
9
    <script>
        $(document).ready(function() {
            $('.pagination ul li a').click(function() {
                $('.pagination ul li a span').css({
                    'display': 'table',
                });
            });
        });
    </script>

На хостинге внизу страницы http://sun8.hol.es/bonado/catalog.html
можете посмотреть что сейчас есть. Осталось только сделать 'display': 'table' для текущего span внутри ссылки.

@sanchahous · 04.07.2014, 13:45 **[ТС]**

Чето мне не везет здесь( Сам отвечаю на свои темы. Ладно я уже сделал...

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
<div class="col-lg-12 pagination">
        <ul>
            <li class="previous pull-left"><a href="#"></a></li>
            <li class="separator pull-left"></li>
            <li class="page-1 pull-left"><a href="#" tabindex="1"><span >1</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="2"><span>2</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="3"><span>3</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="4"><span>4</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="5"><span>5</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="6"><span>6</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="7"><span>7</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="8"><span>8</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="9"><span>9</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="10"><span>10</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="11"><span>11</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="12"><span>12</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="13"><span>13</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="14"><span>14</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="15"><span>15</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="16"><span>16</span></a></li>
            <li class="page pull-left"><a href="#" tabindex="17"><span>17</span></a></li>
            <li class="separator pull-left"></li>
            <li class="next pull-left"><a href="#"></a></li>
        </ul>
    </div>

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
/*****************************GOODS-RIGHT-FORM-PAGINATION**********************/
 
.pagination {
    height: 47px;
 
    width: 600px;
    margin-left: 517px;
    margin-top: 40px;
    margin-bottom: 42px;
}
 
.pagination ul {
    height: 39px;
 
}
 
.pagination ul li {
    line-height: 39px;
}
 
.pagination ul li a {
    display: block;
    height: 39px;
}
 
.pagination ul li.previous {
    background: url('img/1260/previ.png') 0px 0 no-repeat;
    width: 47px;
    height: 39px;
}
 
.pagination ul li.page {
    background-image: url('img/1260/page_bg.png'); 
    width: 27px;
    height: 39px; 
}
 
.pagination ul li.page-1 {
    background-image: url('img/1260/page_first.png'); 
    width: 27px;
    height: 39px; 
}
 
.pagination ul li.page a {
    display: block;
}
 
.pagination ul li.page a span {
    display: none;
}
 
.pagination ul li.page-1 a span {
    display: table;
}
 
.pagination ul li a span {
    margin: 0 auto;
    font-size: 12px;
    font-family: "Open Sans";
    color: #34495E;
    opacity: 0.3;
}
 
.pagination ul li.page a:hover, .pagination ul li a:focus  {
    background-image: url('img/1260/page_hover.png'); 
    width: 27px;
    height: 39px; 
    outline: 0;
}
 
.pagination ul li.separator {
    background-image: url('img/1260/separator.png');
    width: 2px;
    height: 39px;
}
 
.pagination ul li.next {
    background: url('img/1260/next.png') 0px 0 no-repeat;  width: 47px;  height: 39px;
 
} 
 
.active span {
    display: table !important;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
<script>
    $('.pagination ul li.page a').hover(
            function() {
                $(this).addClass('active')
            },
            function() {
                $(this).removeClass('active')
            }
    )
</script>

@and_y87 · 04.07.2014, 14:04

Сообщение от sanchahous

Чето мне не везет здесь( Сам отвечаю на свои темы. Ладно я уже сделал...

Рановато сдаешься видать

раз сам можешь ответить на свои вопросы...

@sanchahous · 04.07.2014, 14:22 **[ТС]**

Сообщение от and_y87

Рановато сдаешься видать раз сам можешь ответить на свои вопросы...

Практически не знаком еще с синтаксисом Jquery и JS. А хочется все и сразу))

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .