자바스크립트 문의좀 드릴께요
본문
자꾸 질문해서 죄송합니다. ㅜㅜ
버튼 클릭시 class .active가 활성화되고 다른버튼 클릭시 해당버튼은 none으로 수졍하려는데요
이것저것 해봐도 안되네요...
어떻게 해야되는건지 좀 부탁드릴께요
<style>
.tabcontent{color:#eee;}
.active{color:#111;}
<style>
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<div id="Home" class="tabcontent">내용</div>
<div id="Home" class="tabcontent">내용</div>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
답변 1
<style>
.tabcontent{color:#eee;}
.active{color:#111;}
</style>
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<div id="Home" class="tabcontent">내용</div>
<div id="Home" class="tabcontent">내용</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
</script>
