bootstrap treeview简单实现各节点对应的href界面跳转

本文介绍了如何在使用Bootstrap Treeview插件时,通过封装数据和编写JavaScript函数,实现在点击树形结构的各个节点时,触发不同的href跳转效果。详细步骤包括设置基本环境、理解treeview节点结构,以及编写实现跳转的JavaScript代码。
摘要由CSDN通过智能技术生成

在使用bootstrap treeview插件的时候,虽然绑定了href,但是在点击的时候,仍然无法实现点击就跳转的效果,于是就换了一种方式来实现这种类似的效果。方法如下:

第一步:插件的基本环境

bootstrap-treeview.min.css(1.2.0)

bootstrap-treeview.min.js(1.2.0)

jquery.js

第二步:对treeview插件的基本认识

首先,这个插件实现的最终效果图是这样的


从上到下,结点的id也就是nodeId是从0开始的,即祖父级菜单为0,父级菜单1为1,子级菜单1为2,依次类推,子级菜单4为6.

根据这样的值就能发现可以通过id的不同来实现每一个结点绑定不同的事件,调用不同的函数,从而实现不同的效果。

第三步:给treeview封装自己想要实现的数据,改变text值来实现对应的效果

具体如下:

    1)html部分

       <div id="menu"></div>

   2)json部分

var person = [
	{
		text:'祖父级菜单',
		href:'#perent',
		tags:['
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值