CSS3分页

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>
这个是一个非常经典的分页例子
猜你喜欢
