HTML에서 트리 구현 방법
4120 단어 html
<!--
function showCurrentSection()
{
var objCurrentSection = document.getElementById("navcurrentsection");
if (objCurrentSection != null)
{
objCurrentSection.style.display = "block";
objCurrentSection.parentElement.childNodes[0].className = "open";
if (objCurrentSection.parentElement.parentElement.nodeName == "UL")
showSection(objCurrentSection.parentElement.parentElement);
}
}
function showSection(objSection)
{
objSection.style.display = "block";
objSection.parentElement.childNodes[0].className = "open";
if (objSection.parentElement.parentElement != null &&
objSection.parentElement.parentElement.nodeName == "UL")
showSection(objSection.parentElement.parentElement);
}
--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Current Tree Node Opener</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="tree.css" type="text/css" media="screen" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="none" />
<meta name="rating" content="all" />
<meta name="author" content="xx" />
<meta name="email" content="[email protected]" />
<script language="javascript" type="text/javascript" src="common.js"></script>
</head>
<body onload="showCurrentSection();">
<ul id="menu">
<li><a href="a.htm">Section 1</a></li>
<li><a href="">Section 2</a>
<ul>
<li><a href="">Section 2.1</a></li>
<li><a href="">Section 2.2</a></li>
<li><a href="">Section 2.3</a>
<ul id="navcurrentsection">
<li><a href="">Section 2.3.1</a></li>
<li><a href="">Section 2.3.2</a></li>
</ul>
</li>
<li><a href="">Section 2.4</a></li>
</ul>
</li>
<li><a href="">Section 3</a></li>
</ul>
</body>
</html> body
{
font-family: Verdana, Arial, Sans-Serif;
font-size: small;
background-color: #ffffff;
}
ul#menu
{
border: solid 1px #333333;
border-top-width: 15px;
padding: 10px;
padding-top: 6px;
margin: 0px;
width: 200px;
}
ul#menu li
{
margin: 0px;
list-style-type: none;
border: solid 1px #ffffff;
}
ul#menu li ul
{
margin: 0px 0px 0px 15px;
display: none;
}
ul#menu li a
{
background-image: url(closed.gif);
background-repeat: no-repeat;
background-position: 0px 4px;
text-indent: 15px;
display: block;
text-decoration: none;
color: #333333;
}
ul#menu li a:hover
{
color: #000000;
background-color: #eeeeee;
background-image: url(open.gif);
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
