HTML语言编写的树形导航栏代码

最新推荐文章于 2023-09-14 14:03:31 发布
最新推荐文章于 2023-09-14 14:03:31 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： 编程开发 文章标签： html 语言 导航 中国 美国
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuhangbiao/article/details/12566743
版权

求HTML语言编写的树形导航栏代码

 

代码：

<HTML>
<HEAD>
<TITLE>树形菜单</TITLE>
<STYLE type="text/css">
     DIV{
         FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;
        }
     A{
       FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none
      }
     A:hover{
             FONT-SIZE: 13px; COLOR: #999999
            }
</STYLE>
<SCRIPT language="JavaScript">
function show(d1)
 {
  if(document.getElementById(d1).style.display=='none')
    {
     document.getElementById(d1).style.display='block'; //显示
    }
  else
    {
     document.getElementById(d1).style.display='none'; //隐藏
    }
 }
</SCRIPT>
</HEAD>
<BODY>
<DIV HEIGHT="30"><FONT color="#CC0000" size="6" ><B>javascript：</B></FONT></DIV><BR>
<A href="javascript:onClick=show('1') ">中国</A>
<DIV id="1" style="display:none">
 &nbsp&nbsp  四川<BR>
&nbsp&nbsp 北京<BR>

&nbsp&nbsp 上海<BR>

&nbsp&nbsp 天津<BR>

&nbsp&nbsp 澳门<BR>

&nbsp&nbsp  山西<BR>

&nbsp&nbsp 陕西<BR>
</DIV>

<DIV><A href="javascript: onClick=show('2') "> 美国</A></DIV>
<DIV id="2" style="display:none">
  &nbsp&nbsp  纽约<BR>
  &nbsp&nbsp  反射<BR>
   &nbsp&nbsp 加州<BR>
  &nbsp&nbsp  户口
</DIV>

<DIV><A href="javascript:onClick=show('3') ">  法国</A></div>
<DIV id="3" style="display:none">
 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

</DIV>

<DIV><A href="javascript:onClick=show('4') ">  英国</A></div>
<DIV id="4" style="display:none">
   &nbsp&nbsp  法国<BR>

&nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>


</DIV>

<DIV><A href="javascript:onClick=show('5') ">奥女</A></div>
<DIV id="5" style="display:none">
 

&nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>


</DIV>

<DIV><A href="javascript:onClick=show('6') ">  够国</A></div>
<DIV id="6" style="display:none">

&nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>

 &nbsp&nbsp  法国<BR>


</DIV>

 

</BODY>
</HTML>

子兮曰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML树形菜单
08-30
树形菜单
用HTML做树形菜单,jquery实现树形菜单完整代码
weixin_31526891的博客
06-04 1114
本实例实现了树形的动态菜单，兼容IE8,火狐，Chrome等浏览器。使用了jQuery的toggle() 方法。效果和代码如下：jquery的树形菜单代码 body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}ul,...
制作一棵ztree
李章勇的博客
04-18 484
制作一棵ztree 　　我们在做web项目时，常会用到一些树形菜单。在此，我们利用ztree实现树形菜单的效果。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 的最大优点。 　　接下来，我演示一棵简单的ztree，效果如下所示： 　　案例架构如下： 　　其中，测试文件inde...
练手 js，html5，jquery 弹窗动态创建树形菜单
m0_47879630的博客
07-20 466
js,html5,jquery,动态创建树形菜单，以防忘记，自己记录一下
HTML实战案例素材1：制作树形菜单页面
海鱼专属博客
05-27 4256
实战案例素材1：制作树形菜单页面 一、完整的页面效果图 二、文本素材 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 本地磁盘(D:) 我的游戏 我的资料 我的电影 三、代码展示 <!DOCTYPE html> <html> <head> <meta charset="ut...
jquery+css+html无限级tree树形菜单（含复选框）
热门推荐
sinat_31016743的博客
06-16 2万+
jquery使用,tree树形目录结构,无限级树形目录
ASP+ACCESS动态二级树形产品导航菜单(黄生原创作品)
03-01
ASP+ACCESS动态二级树形产品导航菜单是一种常见的网站构建技术，尤其在小型企业或个人网站中广泛应用。这个系统由黄生原创设计，旨在提供一种高效、直观的产品分类展示方式，帮助用户快速找到所需产品。 ASP...
bootstrap treeview可搜索下拉树形
09-17
这个特定的压缩包文件包含了一个实现可搜索下拉树形功能的示例，这在许多Web应用中非常有用，比如用于导航菜单、组织结构展示或者层级数据的交互操作。 在jQuery中，Bootstrap Treeview通过添加特定的CSS样式和...
无限级别动态树形菜单
07-16
在现代Web开发中，树形菜单是一项常见的功能，被广泛应用于各种系统管理界面、文件管理器、导航栏等场景。它可以帮助用户直观地浏览层级结构的信息，并提供便捷的操作方式。本文将围绕“无限级别动态树形菜单”的...
一个漂亮的目录树代码（JS版）
10-15
首先，目录树是一种以树形结构展示文件系统或逻辑分层结构的方法。每个节点代表一个目录或文件，通过分支（线条）连接，形成层次关系。在网页应用中，目录树常用于文件管理、网站导航、多级菜单等场景。 JavaScript...
树形导航模板（后台html框架源代码）
01-18
一个很不错的后台树形导航模板（后台html框架源代码）
JAVA上百实例源码以及开源项目源代码
09-17
　使用Java语言编写的一款用于反映颜色变化的面板，也就是大家熟悉的颜色调色板演示程序。原理是初始化颜色选择按钮，然后为颜色选择按钮增加事件处理事件，最后实例化颜色选择器。 Java二进制IO类与文件复制操作...
js无限分级 树_用html+css+js实现一个无限级树形控件
weixin_39860349的博客
01-13 238
树形菜单示例ul>li{list-style: none;}/*可展开*/.switch-open{margin-left:-12px;border:6px solid transparent;display:inline-block;width:0px;height:0px;border-top-color: black;}/*展开完毕*/.switch-close{margin-left:-1...
html分级显示的下拉列表,javascript实现在下拉列表中显示多级树形菜单的方法
weixin_36256978的博客
06-04 449
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下：这里演示在下拉列表框中显示分级的菜单，在很多网站都可以看到的效果，很实用，下拉列表框中的选项是利用JS控制输出，如果你有更好的办法不用JS来显示，那最好了，因为像这种菜单用JS来实现，多多少少有点麻烦。运行效果截图如下：具体代码如下：/p>"http://www.w3.org/TR/xh...
三行代码实现树形菜单（多种风格的菜单展示）
轻松互联网开发,Easy do it,大数据,hadoop,hbase,vertica,java开发
04-04 9538
风格1：图片路径为help/tree；风格2：图片路径为base/tree（轻开B2C电子商务网站组织机构实例，文件为base/xml/tree.html）；风格3：图片路径为help/tree/1；风格4：图片路径为help/tree/2；风格5：图片路径为help/tree/3
用JS实现简单的树形菜单的功能制作
最新发布
Mxy18851251178的博客
09-14 637
首先我想分享的是，什么是递归函数——如果一个函数内部调用自已本身，并且通过条件控制避免陷入死循环,这就是递归函数。根据console.log来判断是否请求成功，请求成功的话就可以开始下一步也就是Js的渲染了。函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将结构拼接到str内部。hallo 大家好 我是你们的孟大王 我今天刚做好一个树形菜单的功能 给你们分享一下。html和css样式完成以后可以开始js的渲染了。常见的树形菜单就可以用递归函数很轻松的实现。话不多说 直接上代码！
树形菜单制作
weixin_59525879的博客
06-26 206
制作做效果如下只是简易效果。运用 递归函数方法制作。
HTML+JS+CSS自定义树形菜单
weixin_39214481的博客
06-19 866
小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。下面开始...应用到技术：JavaScript/Css/HTMLIDA：VS 2010 首先构造一下思路，需要哪些文件1、js文件2、Css文件3、Html文件4、图标5、Juuery文件6、后台查询数据文件 创建项目 在...
左边树形导航栏html,navbar.html
weixin_29035147的博客
06-04 639
AAAAAA/* nav */.nav{width:100%;height:60px;margin:0px auto;/*background-color: red;*/}.nav li{float:left;width: 200px;height:60px;line-height:60px;text-align:center;font-size:30px;font-weight:bold;pos...
qt 导航栏树形结构
08-23
Qt是一个跨平台的应用程序开发框架，它提供了丰富的组件和工具，用于快速构建现代化的图形用户界面。在Qt中，导航栏可以通过使用树形结构来实现。 树形结构是一种层级结构，常用于表示有父子关系的数据。在导航栏中，使用树形结构可以方便地组织和展示多级菜单或目录。 要实现一个基于树形结构的导航栏，我们可以使用Qt提供的一些相关类和组件。首先，我们可以使用QTreeView组件作为导航栏的主界面。QTreeView是一个用于显示树形结构的可视组件，它可以在其内部生成树形结构的视图。 接下来，我们需要定义一个数据模型来存储和管理树形结构的数据。在Qt中，常用的数据模型类是QStandardItemModel。QStandardItemModel是一个预定义的数据模型，可以用于管理带有父子关系的数据。我们可以通过添加QStandardItem来构建树形结构，并使用setItem方法设置父子关系。 在QTreeView中，我们可以使用setModel方法将QStandardItemModel设置为其数据模型，并使用expandAll方法展开所有节点。我们还可以使用QTreeView的一些信号和槽函数来实现节点的展开和折叠，以及与节点相关的操作。 总结起来，通过利用Qt中的QTreeView和QStandardItemModel，我们可以很方便地实现一个导航栏树形结构。我们可以根据需要添加和管理树形结构的节点，实现导航栏的功能。同时，Qt提供的丰富的UI组件和事件机制，也可以让我们进一步定制和优化导航栏的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子兮曰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值