javascript 관련 질문입니다.
본문
<div class="inner_city">
<div class="year_">
<p id="year_btn"><?=date('Y')?></p>
<div class="year__inner">
<ul>
<li><a href="javascript:;">2022</a></li>
<li><a href="javascript:;">2021</a></li>
<li><a href="javascript:;">2020</a></li>
<li><a href="javascript:;">2019</a></li>
</ul>
</div>
</div>
<div class="tap_btn together_month_btn">
<button class="active">1월</button>
<button>2월</button>
<button>3월</button>
<button>4월</button>
<button>5월</button>
<button>6월</button>
<button>7월</button>
<button>8월</button>
<button>9월</button>
<button>10월</button>
<button>11월</button>
<button>12월</button>
</div>
</div>
<script>
$(document).ready(function(){
$(document).on("click", ".year__inner li", function(){
if ($(".slider .item").length > 0){
$('.slider').slick('unslick');
$(".slider").empty();
}
var year = $(this).find('a').text();
$('#year_btn').text(year);
$(".year__inner").slideToggle("fast");
get_together('hp_together', year, '1');
});
$(document).on("click", ".together_month_btn button", function(){
if ($(".slider .item").length > 0){
$('.slider').slick('unslick');
$(".slider").empty();
}
var year = $('#year_btn').text();
var month = $(this).text();
month = month.replace(/월/gi, '');
get_together('hp_together', year, month);
});
안녕하세요.
현재 이런 코드를 사용해서 월별로 버튼을 만들어두었습니다.
DB에 글을올리면 해당 월에서 땡겨와 글을 노출시켜주는 용도인데요.
지금은 홈페이지 로딩시 active가 1월로 고정되어있는데 이걸 로딩시 해당월위치에 맞추고 싶습니다.
지금이 3월이니 로딩하면 버튼이 3월에 active를 줄수있도록이요..
기본기가 많이 부족한상태에서 하려다보니 조금 어렵네요. 조언을 좀 부탁드리겠습니다.
답변 1
이래서는 설명이 많이 많이 많이 많이 부족한데요?
html 에서부터 자바스크립트 "풀코드"를 올려주셔야 소스독해가 가능합니다.
제이쿼리를 썼다면 제이쿼리 파일의 경로까지도 주셔야 해요.
여튼 12개의 버튼 중 클래스가 active 가 들어가는 버튼에 해당하는 달이 최초에 노출된다는 짐작하에서...
<div id=monthDiv class="tap_btn together_month_btn">
<button>1월</button>
<button>2월</button>
<button>3월</button>
<button>4월</button>
<button>5월</button>
<button>6월</button>
<button>7월</button>
<button>8월</button>
<button>9월</button>
<button>10월</button>
<button>11월</button>
<button>12월</button>
</div>
<script>
monthDiv.getElementsByTagName("button")[new Date().getMonth()].classList = "active";
</script>
답변을 작성하시기 전에 로그인 해주세요.
