js css_javascript 기술로 탭 메뉴 전환 효과를 얻는 방법

이 기사의 예에서는 js css를 사용하여 탭 메뉴 전환 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

index.css는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

* {
여백: 0px
패딩: 0px; }
본문 {
너비: 600px
여백: 0 자동
배경색: 은색
}

#컨테이너 {
배경색: 노란색
너비: 600px; 높이: 400px
}

#tabNavi {
너비: 600px; 높이: 30px
배경색: #00bfff
텍스트 장식: 없음
목록 스타일 유형: 없음
}

#tabNavi 리 {
플로트: 왼쪽
​ 오른쪽 여백: 7px;
배경색: #008b8b; 색상: 흰색
커서: 포인터
너비: 60px
높이: 28px
줄 높이: 30px
텍스트 정렬: 가운데
}
#콘텐츠 {
너비: 600px; 높이: 370px
배경색: 흰색
}

index.html은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<스크립트 유형="텍스트/자바스크립트"> 함수 젤(id) {
                return document.getElementById(id)
~
var arr = [
{ "title": "뉴스", "content": "뉴스 채널입니다" },
                    { "title": "금융", "content": "금융 채널입니다" },
{ "title": "엔터테인먼트", "content": "오락 채널입니다" },
{ "title": "스포츠", "content": "스포츠 채널입니다" },
                     { "title": "자동차", "content": "자동차 채널입니다" },
{ "title": "동영상", "content": "동영상 채널입니다." },
                      { "title": "Life", "content": "이것이 라이프 채널입니다" }
];

           window.onload = function() {                          for (var i = 0; i               var liNew = document.createElement("li")
~                                              gel("tabNavi").appendChild(liNew)
                            // 클릭 이벤트를 이러한 li에 바인딩합니다. 각 li에 속성을 할당해야 합니다(ID가 바람직함)
>                                                                                    liNew.set Attribute("id", i);                                                                             ~                 var navs = gel("tabNavi").childNodes
//모든 색상 지우기
for (var j = 0; j < navs.length; j ) {
If (navs[j].nodeType == 1) {
navs[j].style.BackgroundColor ="#008b8b"
~          ~             
This.style.BackgroundColor = "빨간색"
gel("content").innerHTML = arr[this.id].content
~ ~             };                             

~                               ~