怎样实现网页的左边是树型结构，右边是相应的内容显示

lavender_wang 2001-09-15 06:05:45
我现在急需实现网页的左边是树行结构，当点击左边树上的某个节点时，页面右面的内容随之改变，但是不能用框架和层。
...全文
223 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
casear_huang 2001-09-16
  • 打赏
  • 举报
 回复
在dw里面有一个插件，很容易做出树型结构。
而csdn这里面的这个树型结构很象是用这个插件做出来的。
viking 2001-09-16
  • 打赏
  • 举报
 回复


不用框架怎么行，除非你的每个页面都做死链接。那样会很累地，还是研究一下 CSDN 的代码吧


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv=PRAGMA CONTENT=NO-CACHE>
<link rel="stylesheet" href="../news.css"></head>
<body bgcolor="#D6E7E7" topmargin="0" leftmargin="0">
<table width="148" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td>
<script language="JavaScript1.2">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

if (ver4) {
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}

function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}

function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}

function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}

function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}

onload = initIt;

</script>

<div id="KB9Parent" class="parent">
  <a href="#" onClick="expandIt('KB9'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">微软技术专区</a></div>
<div id="KB9Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=1" target="forum">Visual C++</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=2" target="forum">Visual Basic</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=9" target="forum">ActiveX/COM</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=20" target="forum">VBA</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=23" target="forum">ASP</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=30" target="forum">.NET Framework</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=18" target="forum">XML/SOAP</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=32" target="forum">ADO.NET</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=33" target="forum">ASP.NET</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=34" target="forum">Web Services</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=35" target="forum">Web Forms</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=36" target="forum">Windows Forms</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=37" target="forum">VB.NET</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=38" target="forum">VC.NET</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=17" target="forum">C#</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=39" target="forum">Windows9x/ME</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=40" target="forum">Win NT/2000/XP</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=41" target="forum">DOS</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=42" target="forum">Office使用</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=43" target="forum">Office开发</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=44" target="forum">Exchange server </a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=45" target="forum">IIS</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="/Questionnaire/list_answer1.asp?id=5" target="_blank">微软调查</a><br>
</div>
<div id="KB3Parent" class="parent">
  <a href="#" onClick="expandIt('KB3'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">软件开发者</a></div>
<div id="KB3Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=3" target="forum">Delphi</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=4" target="forum">C/C++</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=5" target="forum">C++ Builder</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=26" target="forum">Java</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=6" target="forum">ASM</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=7" target="forum">数据库开发</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=19" target="forum">数据仓库</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=8" target="forum">PowerBuilder</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=29" target="forum">嵌入式开发</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=10" target="forum">数据算法</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=11" target="forum">软件工程</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=12" target="forum">图形/游戏/多媒体</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=13" target="forum">安全技术</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=14" target="forum">网络/通讯</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=15" target="forum">技术书籍</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=16" target="forum">文件格式</a><br>
</div>
<div id="KB2Parent" class="parent">
  <a href="#" onClick="expandIt('KB2'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">计算机用户</a></div>
<div id="KB2Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=71" target="forum">软件使用</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=72" target="forum">资源使用</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=74" target="forum">我看软件</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=75" target="forum">寻找软件</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=76" target="forum">行业软件</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=77" target="forum">软件评测</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=81" target="forum">Linux/UNIX</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=82" target="forum">硬件指南</a><br>
</div>
<div id="KB4Parent" class="parent">
  <a href="#" onClick="expandIt('KB4'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">Web开发者</a></div>
<div id="KB4Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=21" target="forum">主页制作</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=22" target="forum">图形处理</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=23" target="forum">ASP</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=24" target="forum">PHP</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=25" target="forum">Perl</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=28" target="forum">JSP</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=27" target="forum">Javascript</a><br>

</div>
<div id="KB5Parent" class="parent">
  <a href="#" onClick="expandIt('KB5'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">扩充话题</a></div>
<div id="KB5Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=61" target="forum">程序人生</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=62" target="forum">软件市场</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=67" target="forum">走向海外</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=63" target="forum">程序员考试</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=64" target="forum">人才热线</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=65" target="forum">建议和意见</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=66" target="forum">灌水乐园</a><br>
</div>
  <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=68" target="forum">程序员杂志</a><br>
<div id="KB1Parent" class="parent">
  <a href="#" onClick="expandIt('KB1'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">专家榜</a></div>
<div id="KB1Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="topexpert.shtm" target="forum">分类专家榜</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="top50.asp" target="forum">技术专家总榜</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="mtopexpert.shtm" target="forum">技术专家月榜</a><br>
</div>
<div id="KB6Parent" class="parent">
  <a href="#" onClick="expandIt('KB6'); return false"><img src="images/i_option.gif" width="20" height="16" border="0">系统功能</a></div>
<div id="KB6Child" class="child">
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=101" target="forum">最新贴子</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=103" target="forum">抢分区</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=100" target="forum">我的问题</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=104" target="forum">我参与的问题</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="forum.asp?room=105" target="forum">我得分的问题</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="hottopic.asp" target="forum">热点问题</a><br>
    <img src="images/filebox.gif" width="19" height="13"><a href="register.asp" target="_blank">修改个人注册信息</a><br>
</div>
</td>
</tr>
<tr><td height=100 align=center>

<a href="http://www.csdn.net/expert/zcxy.shtm" target="_blank">CSDN会员登记条款</a><br>
<a href="http://www.csdn.net/expert/ltzz.shtm" target="_blank">论坛用户行为准则</a>
</td></tr>
<tr><td>
</td></tr>
</table>
</body></html>
lovered_GV 2001-09-16
  • 打赏
  • 举报
 回复
不用 来这里看看http://lovered.126.com
wyzegg 2001-09-15
  • 打赏
  • 举报
 回复
在JAVASCRIPT里写，部分刷新，找个这样的网页学习一下
SpringBoot项目实战+SpringCoud
本套课程主要是一系列Java项目课程，通过理论加实战的方式，让学习Java的同学深入掌握开发实用技能，每个项目都提供了课件和源码 技术包含： 云盘项目： 1. Java基本语法和面向对象 2. 集合、文件IO、反射、网络编程、多线程、JDBC 3. Swing图形化 员工管理系统： 1. SpringBoot、SpringMVC、MyBatis-Plus等核心框架 2. Vue、Element-UI、Axios等前端技术 权限管理系统在员工管理系统基础上新增： 1. SpringSecurity权限框架 2. RBAC权限管理模式 3. Vue树型控件 SpringCloud课程包含微服务开发的主要组件： 1. Eureka注册中心 2. Config配置中心 3. Zuul服务网关 4. Hystrix熔断器和Ribbon负载均衡 5.OpenFeign服务调用
SpringBoot+Jquery+jsTree实现页面树型结构
场景 效果 jstree官网 https://www.jstree.com/ 实现 引用CSS样式 使用cdn或者将其下载 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <li...
Javascript多叉树的递归遍历和非递归遍历
  luke_lin   博客园 首页 新闻 新随笔 联系 管理 订阅 随笔- 108  文章- 4  评论- 13  javascript实现数据结构： 树和二叉树,二叉树的遍历和基本操作 树型结构是一类非常重要的非线性结构。直观地，树型结构是以分支关系定义的层次结构。 树在计算机领域中也有着广泛的应用，例如在编译程序中，用树来表示源程序的语法结构；在数据库系统中，可用树...
图档结构树的设计与关联
第一章   绪 论"图档结构树的设计与关联"的研究目的是用树型目录的层次结构来形象的表示不同图档之间的分类关系，并借此对图档信息进行分类、管理，同时将树型目录结构的各叶子节点与图档信息数据库内的相关信息进行关联，并能够方面的输出这些信息。类似的树型目录结构的例子有很多，如Windows的资源管理器，帮助信息等都采用的是树型结构目录。这些和这里图档结构树所使用的原理是基本相同的。图1-1显示了简
js DOM
DOM基础 什么是 DOM DOM( Document Object Model,文档对象模型)是w3C制订的一套技术规范,用来描述 Javascript脚本如何与HTML或XML文档进行交互的Web标准 加载 HTML 页面时, Web浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成的DOM树 DOM规定了一系列标准接口,允许开发人员通过标准方式访问文档结构、操作网页内容、控制样式和行为等 在DOM中，接口可以理解为就是函数（函数 方法 API 接口 本质上都是一个函
其他

10,606

社区成员

29,047

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 其他
社区管理员
  • 其他
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章