Html, css 및 js를 사용하여 탭 만들기

100일 코드의 네 번째 날.

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>
색인js
function 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을 업데이트합니다.

좋은 웹페이지 즐겨찾기