<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
여기서 버튼 클릭시마다 새로고침이 되게 하고 싶어요
답변 1개 / 댓글 2개
버튼에 onclick 이벤트 넣어주시면됩니다
onClick="window.location.reload()"
답변에 대한 댓글 2개
ajax로 페이지내용을 그대로 복사해서 추가된버튼만 남기고 나머지는 삭제하도록 새로만드는게 아니라면 불가능해보이네요
답변을 작성하려면 로그인이 필요합니다.
온클릭을 하면 전체가 새로고침되서 버튼도 초기화되는거라...
제가 궁금했던건 버튼을 클릭시 클릭한 버튼은 유지하면서 새로고침이라서요