zoukankan      html  css  js  c++  java
  • javascript+css实现导航树

     

    如何实现这样的导航树(有一个如同window导航栏和一个类似treeview的东西),一直是我想做的东西,现在做出来了:

    导航栏采用的是div来实现的,点击div的时候,将自己下面白色部分显示出来,将别人的下面部分隐藏起来。 

    function divLeftTitle_onclick(elementID)
    {
        var divSurveyData_C = document.getElementById("divSurveyData_C");
        divSurveyData_C.style.display = "none";
        var divProduceData_C = document.getElementById("divProduceData_C");
        divProduceData_C.style.display = "none";
        var divDesignData_C = document.getElementById("divDesignData_C");
        divDesignData_C.style.display = "none";
        var divPCSynchronous_C = document.getElementById("divPCSynchronous_C");
        divPCSynchronous_C.style.display = "none";
        var divLookOver_C = document.getElementById("divLookOver_C");
        divLookOver_C.style.display = "none";
        var divManager_C = document.getElementById("divManager_C");
        divManager_C.style.display = "none";
        
        var divSurvyData = document.getElementById("divSurvyData");
        var item = document.getElementById(elementID);
        item.style.height = (m_frameHeight - 6 * divSurvyData.offsetHeight) + "px";
        item.style.display = "block";//(item.style.display == "none") ? "block" : "none";
    }

    类似TreeView 的东西,通过ul和li的组合实现

     <ul style="text-align:left">
                                <li class="root">
                                    <div onclick="liItemTitle_onclick('ulSuerveyFile')">测量文件</div>
                                    <ul id="ulSuerveyFile">
                                        <li class="Child" onclick="child_onclick()">|- 查询</li>
                                        <li class="Child">|- 导入</li>
                                        <li class="Child">|- 导出</li>
                                        <li class="Child">|- 删除</li>
                                    </ul>
                                </li>
    ul
    {
        padding:0;
    }
    
    .root
    {
        padding:0 0 0 10px;
        list-style:none;
        font-size:larger;
        cursor:pointer;
    }
    
    .Child
    {
        padding:0 0 0 20px;
        list-style:none;
        font-size:large;
        cursor:pointer;
    }

    ui 和li的样式通过css来改变,每一栏左边还可以加img。
    里面的树实现隐藏和展开功能:

    function liItemTitle_onclick(elementID)
    {
        var item = document.getElementById(elementID);
        item.style.display = (item.style.display == "none") ? "block" : "none";
    }
  • 相关阅读:
    设计模式-Note9-行为变化类
    设计模式-Note8-数据结构类
    设计模式-Note7-状态变化类
    设计模式-Note6-接口隔离类
    设计模式--Note5--对象性能类
    设计模式--Note4--对象创建类
    设计模式--Note3--单一职责类
    设计模式--Note2--组件协作类
    V$ACCESS 查询结果慢的解决方法
    openstack numa详解(命令使用篇)
  • 原文地址:https://www.cnblogs.com/wangzihao/p/3007495.html
Copyright © 2011-2022 走看看