如何设置HTML分页的样式

Question

我已经创建了一个Pagination，它将显示/隐藏基于活动页面的div，如这里的https://jsfiddle.net/bogaso/qh7cpxzv/11/

但是，我未能在导航条上应用样式。特别是我想申请以下两种风格的最低层次：

1. 我希望导航栏停留在页面的center，顶部是特定的margin
2. 此外，我想在每个页码周围应用border，就像在round中一样

然而，当我试图用一些<a> tag包装<div>时，我在导航中失去了所有的控制，也就是说，下面的代码无法应用任何样式

<div class = 'Top'>
<a href="#" rel="page-1" class="active A1">1</a>
<a href="#" rel="page-2" class = "A1">2</a>
<a href="#" rel="page-3" class = "A1">3</a>
<a href="#" rel="page-4" class = "A1">4</a>
<a href="#" rel="page-5" class = "A1">7</a>
<a href="#" rel="page-6" class = "A1">6</a>
</div>

对于如何在导航栏中应用样式的任何帮助都将不胜感激。

另外，是否可以完全基于HTML + CSS实现相同的？

Answer 1

请尝试下面的HTML，CSS和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'>
  <a href="#" rel="page-1" class="active A1">1</a>
  <a href="#" rel="page-2" class="A1">2</a>
  <a href="#" rel="page-3" class="A1">3</a>
  <a href="#" rel="page-4" class="A1">4</a>
  <a href="#" rel="page-5" class="A1">7</a>
  <a href="#" rel="page-6" class="A1">6</a>
</div>

​