div + css 트 리 메뉴
31941 단어 div+css
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
a,a:visited {color:#333;text-decoration:none;}
a:hover {color:#f60;}
body,td {font:13px "Geneva"," ", "Arial", "Helvetica",sans-serif;}
ul,li {margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}
h1 {padding:5px;color:#900;font:16px bold "Geneva"," ", "Arial", "Helvetica",sans-serif;}
h1 small {font-size:11px;font-weight:normal;color:#660;}
.tree_out {width:200px;}
.tree_1 .tree_tit a,
.tree_1 .tree_tit a:visited,
.tree_2 .tree_tit a,
.tree_2 .tree_tit a:visited {margin-left:10px;padding-left:40px;color:#003;font-size:12px;display:block;}
.tree_2 .tree_tit h3.Lst a {line-height:250%;background: #FF0000;}
.tree_2 .tree_txt {display:none;}
.tree_1 .tree_txt ul li {padding-left:65px;line-height:150%;}
.tree_1 .tree_txt .num {color:#e00;}
</style>
<script type="text/javascript">
<!--
function ExChgClsName(Obj,NameA,NameB){
var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;
Obj.className=Obj.className==NameA?NameB:NameA;
}
function showmenu_tree(iNo){
ExChgClsName("tree_id__"+iNo,"tree_1","tree_2");
}
-->
</script>
</head>
<body>
<div class="tree_out">
<div class="tree_1" id="tree_id__0">
<div class="tree_tit"><h3><a href="javascript:showmenu_tree(0);"> </a></h3></div>
<div class="tree_txt">
<ul>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li class="Lst"><a> </a></li>
</ul>
</div>
</div>
<div class="tree_2" id="tree_id__1">
<div class="tree_tit"><h3><a href="javascript:showmenu_tree(1);"> </a></h3></div>
<div class="tree_txt">
<ul>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li class="Lst"><a> </a></li>
</ul>
</div>
</div>
<div class="tree_2" id="tree_id__2">
<div class="tree_tit"><h3><a href="javascript:showmenu_tree(2);"> </a></h3></div>
<div class="tree_txt">
<ul>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li class="Lst"><a> </a></li>
</ul>
</div>
</div>
<div class="tree_2" id="tree_id__3">
<div class="tree_tit"><h3><a href="javascript:showmenu_tree(3);"> </a></h3></div>
<div class="tree_txt">
<ul>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li><a> </a></li>
<li class="Lst"><a> </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css + div 라 고 하지만 자 바스 크 립 트 가 작용 하 는 게 틀림 없어 요.
그리고 충격 적 으로 효과 가 있 는 코드 를 발 견 했 습 니 다.
Obj.className=Obj.className==NameA?NameB:NameA;
어느 것 을 선택 하면 어느 div 의 css 를 바 꿔 라.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
자주 사용하는div+css 3열 레이아웃 구조와 스타일 (1)3열 레이아웃은 흔히 볼 수 있는데 보통 좌우 2열의 너비가 고정된 다음에 중간 내용이 스스로 적응한다. 구조: 스타일: 부동을 이용하여 왼쪽 층을 왼쪽으로 부동시키고 오른쪽 층을 오른쪽으로 부동시킨 다음에 중간 층...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.