How to style HTML Pagination - html

Question

I have created a Pagination which will show/hide div based on the active Page as here https://jsfiddle.net/bogaso/qh7cpxzv/11/
However, I failed to apply style on the Navigation bar. Particularly I want to apply below two styles at the minimum level:
I want the Navigation bar will stay at the center of the page, with specific margin at top
Furthermore I want to apply border around each page number as in https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_pagination_border_round
However when I try to wrap the <a> tag with some <div>, I lost all control in the navigation, i.e. below code fails to apply any style
<div class = 'Top'>
1
2
3
4
7
6
</div>
Any help on how to apply Style in the navigation bar would be highly appreciated.
Also is it possible to implement the same based solely on HTML + CSS?

Answer 1

The main problem with your CSS code is at the beginning.
You are adding a rule to hide all div elements, and this is causing the problem when you wrap the <a> tags with a div.
The solution is to apply the CSS hiding only for the page elements.
So, remove the CSS rule at the top and style the AAA class instead:
.AAA {
display: none;
height: 120px;
width: 120px;
}
.AAA.active { display: block; }
To center the pagination controls, I recommend using the Flexible Box Layout Module, aka flex.
This would be the CSS rule to center the pagination and keep its margin:
.Top {
display: flex;
margin: 10px 0;
justify-content: center;
}
As for your question, it isn't possible to do this using only CSS and HTML, at least not in a good way. CSS shouldn't dictate the behaviour of a webpage.
For your development, I really suggest learning proper HTML style guide, and especially trying to be consistent. I noticed sometimes you use single quotes other times double quotes fort HTML attributes. It should always be double quotes without any spaces betweens the equal sign and the quotes :)
In the end, the code will be:
$('a.A1').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).addClass('active');
return false;
});
.A1 {
background: rgba(0,0,0,.1);
margin: 0;
padding: 0;
height: 10px;
width: 10px;
}
.AAA {
display: none;
height: 120px;
width: 120px;
}
.AAA.active { display: block; }
.Top {
display: flex;
margin: 10px 0;
justify-content: center;
}
.Top a {
color: black;
float: left;
padding: 8px 16px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
.Top a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.Top a:hover:not(.active) {background-color: #ddd;}
.Top a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.Top a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page-1" class="active AAA">p1</div>
<div id="page-2" class="AAA">p2</div>
<div id="page-3" class="AAA">p3</div>
<div id="page-4" class="AAA">p4</div>
<div id="page-5" class="AAA">p5</div>
<div id="page-6" class="AAA">p6</div>
<div class="Top">
1
2
3
4
7
6
</div>
Here's a working js fiddle:
https://jsfiddle.net/ovitrif/o8h3nrjb/

Answer 2

Please try with below HTML, CSS and JS.
$('.Top a').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).addClass('active');
return false;
});
div.AAA {
display: none
}
div.active {
display: block;
}
.Top {
display: inline-block;
}
.Top a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
background: rgba(0, 0, 0, .1);
}
.Top a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.Top a:hover:not(.active) {
background-color: #ddd;
}
.Top a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.Top a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.AAA {
height: 120px;
width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="page-1" class="active AAA">p1</div>
<div id="page-2" class='AAA'>p2</div>
<div id="page-3" class='AAA'>p3</div>
<div id="page-4" class='AAA'>p4</div>
<div id="page-5" class='AAA'>p5</div>
<div id="page-6" class='AAA'>p6</div>
<div class='Top'>
1
2
3
4
7
6
</div>