런던 파리 도쿄
본문
탭인데요 런던 파리 도쿄탭을 클릭하면
해당 <div id></div>가 나타나는 건데요
탭 div는 애초에 펼쳐져 있게 할 수 없을까요? 탭으로 된 최신글 처럼요
<div class="tab">
<a class="tablinks" onclick="openCity(event, 'London')">런던/a>
<a class="tablinks" onclick="openCity(event, 'Paris')">파리</a>
<a class="tablinks" onclick="openCity(event, 'Tokyo')">도쿄</a>
</div>
<div id="London" class="tabcontent">
<p>런던</p>
</div>
<div id="Paris" class="tabcontent">
<p> 파리</p>
</div>
<div id="Tokyo" class="tabcontent">
<p> 도쿄</p>
</div>
<script>
function openCity(evt, cityName) {
var k, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (k = 0; k < tabcontent.length; k++) {
tabcontent[k].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (k = 0; k < tablinks.length; k++) {
tablinks[k].className = tablinks[k].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
답변 1
<div class="tab">
<a class="tablinks" onclick="openCity(event, 'London')">런던/a>
에 </a>
< 부분이 빠져 있습니다.
노출부분은 스크립트 하단에
openCity(event, 'London');
넣으시면 되실듯 합니다
그리고 jquery 버전도 추가합니다.
<!-- jquery 가 있으시면 이부분은 삭제해주세요 -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- jquery 가 있으시면 이부분은 삭제해주세요 -->
<style>
.tab a{}
.tabcontent{display:none;}
.tabcontent.active{display:block;}
</style>
<div class="tab">
<a href="javascript:;" class="tablinks active" data-val="London">런던</a>
<a href="javascript:;" class="tablinks" data-val="Paris">파리</a>
<a href="javascript:;" class="tablinks" data-val="Tokyo">도쿄</a>
</div>
<div id="London" class="active tabcontent">
<p>런던</p>
</div>
<div id="Paris" class="tabcontent">
<p> 파리</p>
</div>
<div id="Tokyo" class="tabcontent">
<p> 도쿄</p>
</div>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
$(".tablinks").on("click", function(){
var id=$(this).data("val");
jQuery(".tabcontent").removeClass("active");
jQuery("#"+id).addClass("active");
});
});
//-->
</script>
시간내서 코드까지 짜주시니 너무 감사합니다~
그사이 수준급 고수인거 알고 있었지만 도대체 이런거까지 어떻게 알고 계시는지 존경스럽습니다.
