Показать 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. А хочется все и сразу))

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .