JS 자체 적응 폭 의 태그 전환 실현
8700 단어 JavaScripthtmlWebcsshtml5
이 효 과 는 순수 JavaScript 코드 를 사용 하여 TAB 페이지 전환 효 과 를 실현 합 니 다.TAB 탭 은 내용 에 따라 너비 에 적응 하고 TAB 탭 을 클릭 하여 내용 페이지 를 전환 합 니 다.
HTML 파일 코드:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS Tag - HoverTree</title><base target="_blank" />
<style type="text/css">
#hovertreecon {
FONT-SIZE: 12px;
MARGIN: 0px auto;
WIDTH: 600px;
}
#hovertreecon a {font-size:14px;line-height:20px;
color:blue;text-decoration:none;}
#hovertreetags {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 0px 10px;
WIDTH: 400px;
PADDING-TOP: 0px;
HEIGHT: 23px;
}
#hovertreetags LI {
BACKGROUND: url(http://hovertree.com/texiao/js/3/tagleft.gif) no-repeat left bottom;
FLOAT: left;
MARGIN-RIGHT: 1px;
LIST-STYLE-TYPE: none;
HEIGHT: 23px;
}
#hovertreetags LI A {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
BACKGROUND: url(http://hovertree.com/texiao/js/3/tagright.gif) no-repeat right bottom;
FLOAT: left;
PADDING-BOTTOM: 0px;
COLOR: #999;
LINE-HEIGHT: 23px;
PADDING-TOP: 0px;
HEIGHT: 23px;
TEXT-DECORATION: none;
}
#hovertreetags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%;
WIDTH: 4px;
}
#hovertreetags LI.hovertreeSelectTag {
BACKGROUND-POSITION: left top;
MARGIN-BOTTOM: -2px;
POSITION: relative;
HEIGHT: 25px;
}
#hovertreetags LI.hovertreeSelectTag A {
BACKGROUND-POSITION: right top;
COLOR: #000;
LINE-HEIGHT: 25px;
HEIGHT: 25px;
}
#hovertreeContent {
BORDER-RIGHT: #aecbd4 1px solid;
PADDING-RIGHT: 1px;
BORDER-TOP: #aecbd4 1px solid;
PADDING-LEFT: 1px;
PADDING-BOTTOM: 1px;
BORDER-LEFT: #aecbd4 1px solid;
PADDING-TOP: 1px;
BORDER-BOTTOM: #aecbd4 1px solid;
BACKGROUND-COLOR: #fff;
}
#hovertreeContent DIV.hovertreeSelectTag {
DISPLAY: block;
}
.hovertreeTagContent {
PADDING-RIGHT: 10px;
DISPLAY: none;
PADDING-LEFT: 10px;
BACKGROUND: url(http://hovertree.com/texiao/js/3/bg.gif) repeat-x;
PADDING-BOTTOM: 10px;
WIDTH: 576px;
COLOR: #474747;
PADDING-TOP: 10px;
HEIGHT: 250px;
}
</style>
</head>
<body>
<div id="hovertreecon">
<ul id="hovertreetags">
<li>
<a onclick="hovertreeSelectTag('hovertreeTagContent0',this)"
href="javascript:void(0)"> </a>
</li>
<li class="hovertreeSelectTag">
<a onclick="hovertreeSelectTag('hovertreeTagContent1',this)"
href="javascript:void(0)"> </a>
</li>
<li>
<a onclick="hovertreeSelectTag('hovertreeTagContent2',this)"
href="javascript:void(0)"> </a>
</li>
</ul>
<div id="hovertreeContent">
<div class="hovertreeTagContent" id="hovertreeTagContent0"> <br />
<ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/nh0pk7kc.htm"> jQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm"> HTML+CSS </a></li><li><a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">CSS </a></li><li><a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">HoverTree CSS </a></li><li><a href="http://hovertree.com/hvtart/bjae/f25wc8ik.htm">DIV LI </a></li><li><a href="http://hovertree.com/hvtart/bjae/wucpcnjm.htm">JavaScript </a></li><li><a href="http://hovertree.com/hvtart/bjae/ae553e2f1027d0ff.htm"> jQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm"> </a></li><li><a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm">jQuery </a></li></ul>
</div>
<div class="hovertreeTagContent hovertreeSelectTag" id="hovertreeTagContent1"> <br />
<ul style="list-style:none;"><li><a href="http://hovertree.com"> </a> <a href="http://hovertree.com/texiao/"> </a> <a href="http://hovertree.com/hvtart/bjae/wokffp10.htm"> </a> <a href="http://hovertree.com/hvtart/bjae/1cijrgj1.htm">jQuery select</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6fd7e9e75b8773b.htm">jQ css() </a></li><li><a href="http://hovertree.com/hvtart/bjae/47ce00836ac8b662.htm">jQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/b6f6650a1b6ce369.htm">jQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/a3fc809e13e1157e.htm">jquery HTML </a></li><li><a href="http://hovertree.com/hvtart/bjae/5aac47a87eb2a3c2.htm"> jQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/c5a746a2d25d43b7.htm">jQuery - attr() </a></li><li><a href="http://hovertree.com/hvtart/bjae/e367418912caa0b8.htm">JQuery </a></li><li><a href="http://hovertree.com/hvtart/bjae/e23e16b491f3cae2.htm"> Jquery $.each </a></li><li><a href="http://hovertree.com/hvtart/bjae/fa1cb9dc2e859da8.htm">jQuery 8 </a></li></ul>
</div>
<div class="hovertreeTagContent" id="hovertreeTagContent2">
<br />
<ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/bvnsa1gk.htm">div div div </a></li><li><a href="http://hovertree.com/hvtart/bjae/kl77symv.htm">web </a></li><li><a href="http://hovertree.com/hvtart/bjae/nf4w1l0h.htm">3 css </a></li><li><a href="http://hovertree.com/hvtart/bjae/ia0qi2nv.htm"> CSS Table </a></li><li><a href="http://hovertree.com/hvtart/bjae/usi4p1v9.htm"> CSS ime-mode / </a></li><li><a href="http://hovertree.com/hvtart/bjae/j2w0mylg.htm">CSS </a></li><li><a href="http://hovertree.com/hvtart/bjae/isnqi1t4.htm"> Css ： </a></li><li><a href="http://hovertree.com/hvtart/bjae/v8e7w4u1.htm"> link,hover,active,visited,focus </a></li><li><a href="http://hovertree.com/hvtart/bjae/alaxpy6v.htm"> padding margin </a></li><li><a href="http://hovertree.com/hvtart/bjae/4a41528072f21543.htm">div+css </a></li></ul>
</div>
</div>
</div>
<script>
function hovertreeSelectTag(showContent, selfObj) {
//
var tag = document.getElementById("hovertreetags").getElementsByTagName("li");
var taglength = tag.length;
for (i = 0; i < taglength; i++) {
tag[i].className = "";
}
selfObj.parentNode.className = "hovertreeSelectTag";
//
for (i = 0; j = document.getElementById("hovertreeTagContent" + i) ; i++) {
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>웹페이지 특수효과 집계:http://ini.iteye.com/blog/2165698
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
