Html, css 및 js를 사용하여 탭 만들기
1520 단어 htmlcssjavascript100daysofcode
HTML 코드:
<div class="tabs">
<button id="tab1" onclick="open(event, 'html')" type="button">
HTML
</button>
<button id="tab2" onclick="open(event, 'css')" type="button">
CSS
</button>
<button id="tab3" onclick="open(event, 'js')" type="button">
JS
</button>
</div>
<div id="cont"></div>
색인jsfunction open(event, skill) {
event.preventDefault();
const content = document.getElementById("cont");
content.classList.add("content");
if (skill == "html") {
content.innerHTML =
"HTML is the standard markup language for Web pages.With HTML you can create your own Website.";
}
if (skill == "css") {
content.innerHTML =
"CSS is the language we use to style an HTML document.CSS describes how HTML elements should be displayed.";
}
if (skill == "js") {
content.innerHTML =
"JavaScript is the worlds most popular programming language.JavaScript is the programming language of the Web.";
}
}
onclick 이벤트 전달 기술을 통해 기술이 단추 값과 일치하면 innerHTML을 업데이트합니다.
Reference
이 문제에 관하여(Html, css 및 js를 사용하여 탭 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/umapreethidev/creating-tabs-using-html-css-js-28dh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)