1.分页是css3中重要的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3分页</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<script>
let ulObj = document.querySelector('.pagination');
console.log(ulObj);
let aObj = document.getElementsByTagName('a');
console.log(aObj)
for(let i=0;i<aObj.length;i++){
aObj[i].setAttribute('index',i);//设置索引
aObj[i].onclick = function () {
for(let i=0;i<aObj.length;i++){
aObj[i].className = '';
}
this.className = 'active';
console.log(aObj[i].innerHTML);
console.log(aObj[i].getAttribute('index'));//获取索引
}
}
</script>
</body>
</html>
这个是一个非常经典的分页例子