Jam's story

[CSS] 페이징 처리 본문

WEB/CSS

[CSS] 페이징 처리

애플쩀 2022. 5. 23. 11:22 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
* {
    box-sizing: border-box;
}

.pagination {
    /* border: 1px solid red; */
    overflow: auto;
    width: 50%;
    margin: 0 auto;
}

.pagination a {
    color: black;
    text-decoration: none;

    float: left;/* a는 인라인이라 안먹으니까 추가 */
    width: 8.3%;
    text-align: center;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

.pagination a.active {
    background-color: dodgerblue;
    color: white;
}
</style>
</head>
<body>
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="active">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">&gt;</a>
<a href="#">&raquo;</a>
</div>
<script type="text/javascript">
$(".pagination a").click(function(event){
	
	$(".pagination a").not(this).removeClass("active");
	$(this).addClass("active");
});
</script>
</body>
</html>
Insert title here
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 테이블 꾸미기  (0) 2022.05.23
[CSS] li 꾸미기  (0) 2022.05.23
[CSS] div와 a로 메뉴 만들기+ hover  (0) 2022.05.23
[CSS] 아이콘  (0) 2022.05.20
[CSS] 구글 글꼴 사용  (0) 2022.05.20
'WEB/CSS' Related Articles more
Comments