• html目录树的操作

    示例：http://www.cnblogs.com/endv/p/4018554.html#endv9

    目录
    1.目录1
    2.目录
    3.目录
    4.目录
    5.目录
    6.目录
    7.目录
    8.目录
    9.目录
    10.目录
    11.目录
           目录连接到标题，先看效果，单击折叠或展开，原代码在 目录5。

    1. 目录

    2. 目录

    3. 目录

    4. 目录

    0000

    5. 目录 原代码在这里（展开）

    0000 
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 
</head>
<body>
    <div>
        <div id="endv" style="color: #ff0000;" onclick="document.all.endv0_1.style.display = (document.all.endv0_1.style.display == 'none') ? '' : 'none'" dir="ltr">目录</div>

        <!--<div id="endv1">-->

        <div id="endv0_1">
            <a href="#endv1">1.目录1 </a><br />
            <a href="#endv2">2.目录</a><br />
            <a href="#endv3">3.目录  </a><br />
            <a href="#endv4">4.目录  </a><br />
            <a href="#endv5">5.目录  </a><br />
            <a href="#endv6">6.目录  </a><br />
            <a href="#endv7">7.目录  </a><br />
            <a href="#endv8">8.目录  </a><br />
            <a href="#endv9">9.目录  </a><br />
            <a href="#endv10">10.目录  </a><br />
            <a href="#endv11">11.目录  </a><br />
           
        </div> <!-- endv1 -->
        <!--<div id="endv4">-->

        <div id="endv1" style="color: #ff0000;" onclick="document.all.endv1_1.style.display = (document.all.endv1_1.style.display == 'none') ? '' : 'none'"
             dir="ltr"  ><h2 aria-atomic="false">1. 目录</h2></div>


        <div id="endv1_1">
            插入内容
        </div>
        <!-- endv1 -->

        <!--<div id="endv4">-->

        <div id="endv2" style="color: #ff0000;" onclick="document.all.endv2_1.style.display = (document.all.endv2_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">2. 目录</h2></div>


        <div id="endv2_1">
            0000
        </div><!-- endv1 -->

        <!--<div id="endv4">-->

        <div id="endv3" style="color: #ff0000;" onclick="document.all.endv3_1.style.display = (document.all.endv3_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">3. 目录</h2></div>


        <div id="endv3_1">
            0000
        </div><!-- endv1 -->


        <!--<div id="endv4">-->

        <div id="endv4" style="color: #ff0000;"  onclick="document.all.endv4_1.style.display = (document.all.endv4_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">4. 目录</h2></div>


        <div id="endv4_1">
            0000
        </div><!-- endv1 -->
        <!--<div id="endv5">-->

        <div id="endv5" style="color: #ff0000;" onclick="document.all.endv5_1.style.display = (document.all.endv5_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">5. 目录</h2></div>


        <div id="endv5_1">
            0000
        </div><!-- endv1 -->
        <!--<div id="endv6">-->

        <div id="endv6" style="color: #ff0000;" onclick="document.all.endv6_1.style.display = (document.all.endv6_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">6. 目录</h2></div>


        <div id="endv6_1">
            0000
        </div>
        <!--<div id="endv7">-->

        <div id="endv7" style="color: #ff0000;" onclick="document.all.endv7_1.style.display = (document.all.endv7_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">7. 目录</h2></div>


        <div id="endv7_1">
            0000
        </div>
        <!--<div id="endv8">-->

        <div id="endv8" style="color: #ff0000;" onclick="document.all.endv8_1.style.display = (document.all.endv8_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">8. 目录</h2></div>


        <div id="endv8_1">
            0000
        </div>
        <!--<div id="endv1">-->

        <div id="endv9" style="color: #ff0000;" onclick="document.all.endv9_1.style.display = (document.all.endv9_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">9. 目录</h2></div>


        <div id="endv9_1">
            0000
        </div>
        <!--<div id="endv10">-->

        <div id="endv10" style="color: #ff0000;" onclick="document.all.endv10_1.style.display = (document.all.endv10_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">10. 目录</h2></div>


        <div id="endv10_1">
            0000
        </div>
        <!--<div id="endv11">-->

        <div id="endv11" style="color: #ff0000;" onclick="document.all.endv11_1.style.display = (document.all.endv11_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">11. 目录</h2></div>







    </div>
</body>
</html>
    代码

    6. 目录

    0000

    7. 目录

    0000

    8. 目录

    9. 目录

    10. 目录

    11. 目录

     作者：http://www.cnblogs.com/endv/p/4018554.html#endv9

    源码下载：http://files.cnblogs.com/endv/Htmltree.zip
  • 相关阅读:
    算法学习（二）——树状数组求逆序数
    ZOJ 2412 Farm Irrigation
    排列的生成算法（一）
    汉诺塔递归实现
    汇编（五）
    汇编（四）
    汇编（三）
    汇编（二）
    0103MySQL中的B-tree索引 USINGWHERE和USING INDEX同时出现
    0103如何通过索引长度确定是否使用全索引
  • 原文地址：https://www.cnblogs.com/endv/p/4018554.html
Copyright © 2020-2023  润新知