이 기사에서는 JS+CSS에 의해 탭 메뉴 전환 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
index.css는 다음과 같습니다.
다음과 같이 코드를 복사하십시오.* {
여백 : 0px;
패딩 : 0px;
}
몸 {
너비 : 600px;
여백 : 0 Auto;
배경색 :은;
}
#Contanier {
배경색 : 노란색;
너비 : 600px; 높이 : 400px;
}
#tabnavi {
너비 : 600px; 높이 : 30px;
배경색 : #00bfff;
텍스트 결정 : 없음;
목록 스타일 유형 : 없음;
}
#Tabnavi li {
플로트 : 왼쪽;
마진 오른쪽 : 7px;
배경색 : #008B8B;
색상 : 흰색;
커서 : 포인터;
너비 : 60px;
높이 : 28px;
라인 높이 : 30px;
텍스트 정렬 : 센터;
}
#콘텐츠 {
너비 : 600px; 높이 : 370px;
배경색 : 흰색;
}
index.html은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<title> js는 탭 메뉴의 동적 스위칭 효과 </title>을 인식합니다
<link href = "css /index.css"rel = "스타일 시트" />
<script type = "text/javaScript">
기능 젤 (ID) {
return document.getElementById (id);
}
var arr = [
{ "title": "News", "Content": "이것은 뉴스 채널"},
{ "title": "Financial", "Content": "이것은 금융 채널입니다"},
{ "제목": "엔터테인먼트", "콘텐츠": "이것은 엔터테인먼트 채널입니다"},
{ "제목": "스포츠", "콘텐츠": "이것은 스포츠 채널"},
{ "title": "car", "content": "이것은 자동차 채널"},
{ "title": "video", "content": "이것은 비디오 채널"},
{ "title": "life", "content": "이것은 생명 채널입니다"}}
];
Window.onload = function () {
for (var i = 0; i <arr.length; i ++) {
var linew = document.createElement ( "li");
linew.innerhtml = arr [i] .title;
젤 ( "tabnavi"). AppendChild (linew);
//이 LI의 클릭 이벤트 바인딩이므로 각각의 속성을 할당해야합니다 (바람직하게는 ID).
linew.setattribute ( "id", i);
linew.onclick = function () {
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 = "빨간색";
겔 ( "내용"). innerHtml = arr [this.id] .content;
};
}
};
</스크립트>
</head>
<body>
<div id = "Contanier">
<ul id = "tabnavi"> </ul>
<div id = "content"> </div>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.