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 를 바 꿔 라.

좋은 웹페이지 즐겨찾기