Question

我创建了一个Pagination，它将根据活动页面显示/隐藏div，如下所示：https://jsfiddle.net/bogaso/qh7cpxzv/11/

但是，我无法在导航栏上应用样式。我特别想在最低级别应用以下两种样式：

我希望导航栏停留在页面的center上，并在顶部放置特定的margin
此外，我想像https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_pagination_border_round一样在每个页码周围应用border

但是，当我尝试用一些<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

CSS代码的主要问题是在开始时。您正在添加一条规则以隐藏所有div元素，这在用<a>包装div标记时引起了问题。解决方案是仅对页面元素应用CSS隐藏。

因此，请删除顶部的CSS规则，然后为AAA类设置样式：

.AAA {
  display: none;
  height: 120px;
  width: 120px;
}

.AAA.active { display: block; }

要使分页控件居中，建议使用弹性框布局模块（又名flex）。

这是将分页居中并保持其边距的CSS规则：

.Top {
  display: flex;
  margin: 10px 0;
  justify-content: center;
}

对于您的问题，仅使用CSS和HTML是不可能的，至少不能很好地做到这一点。 CSS不应决定网页的行为。

对于您的开发，我真的建议您学习适当的HTML样式指南，尤其是尝试保持一致。我注意到有时您有时使用单引号将HTML属性设置为双引号。它应该始终是双引号，等号和引号之间没有空格：）

最后，代码将是：

$('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">
  <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>

这是一个有效的js小提琴： https://jsfiddle.net/ovitrif/o8h3nrjb/

Answer 2

请尝试以下HTML，CSS和JS。

HTML：

<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>

CSS：

div {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;
}

JS：

$('.Top a').click(function() {
 $('.active').removeClass('active');
$(this).addClass('active');
    $('#' + $(this).attr('rel')).addClass('active'); 
    return false;
});

如何设置HTML分页样式

2 个答案: