这是第一次使用zTree，所以在使用之前我要先写一个demo来学习一下。我们要注意的是，zTree是一个jQuery插件，所以我们在导入zTree的js文件之前要先导入jQuery的js文件。

　　我们先下载zTree，点击我跳转到一个网站进行下载

　　代码直接贴出来

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">

        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

        <script type="text/javascript" src="js/jquery.ztree.all-3.1.min.js"></script>

    </head>

    <body>

        <div>

            <ul id="treeDemo" class="ztree"></ul>

        </div>

        <script type="text/javascript">

            var zTreeObj;

            // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

            var setting = {

                callback:{

                    onClick:function(event,treeId,treeNode){

                        if(treeNode.ahref){

                            window.open(treeNode.ahref);

                        }else{

                            alert("此节点没有链接！")

                        }

                    }

                },

                view:{

                    showIcon:false

                }

            };

            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

            var zNodes = [

            {

                name: "test1",

                open: true,

                children: [{name: "test1_1",ahref:"https://www.baidu.com/"}, {name: "test1_2"}]},

            {

                name: "test2",

                open: true,

                children: [{name: "test2_1"}, {name: "test2_2"}]

            }];

            $(document).ready(function() {

                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            });

        </script>

    </body>

</html>

　　

　　之前我在点击test1_1这个节点的时候弹出了两个页面，这个原因是我在设置children节点的时候把里面的链接直接使用的是url属性，这样就会使得我在点击节点时弹出两个页面，然后我把属性名改为了ahref之后就可以了。url估计是一个关键字，我们在设置链接时不要使用url。

jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题的更多相关文章

  1. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  2. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  3. Jquery插件Ztree使用所遇问题

    问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...

  4. jquery mobile页面跳转后，必须重新刷新页面js方可有效

    最近在做个项目,用到jquery mobile,很陌生对他,问题一个个的来,那就要一个个解决,找了一天这个问题,放可明白:首先明白jqm里面页面跳转默认都是通过ajax请求的,必须重新刷新页面js方可 ...

  5. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  6. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  7. 页面跳转时，url 传大数据的参数不全的问题+序列化对象

    1.页面跳转时,url 传大数据的参数不全的问题 //传参: url: '/pages/testOfPhysical/shareEvaluation?detailInfo=' +encodeURICo ...

  8. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  9. selenium获取新页面标签页（只弹出一个新页面的切换）

    selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...

随机推荐

  1. 微信公众号开发java框架：wx4j（MenuUtils篇）

    wx4j-MenuUtils使用 函数说明:发送http请求到微信服务器,完成菜单创建 参数:构造菜单对象 返回值:微信响应的json字符串 public static String createMe ...

  2. lintcode-86-二叉查找树迭代器

    86-二叉查找树迭代器 设计实现一个带有下列属性的二叉查找树的迭代器: 元素按照递增的顺序被访问(比如中序遍历) next()和hasNext()的询问操作要求均摊时间复杂度是O(1) 样例 对于下列 ...

  3. Oracle锁表查询以及解锁

    一.查看锁表进程SQL语句 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo ...

  4. well-known file is not secure

    执行jstack pid时,提示well-known file is not secure. 原因是pid的启动用户不是当前用户,需要切换到启动用户下执行jstack即可. 可以通过如下命令来处理: ...

  5. typescript 简版跳一跳

    typescript 简版跳一跳 学习typescript,第一步应该是学习官方文档,理解最基础的语法.第二步开始用typescript实现一些js+css 或者canvas类型的游行.现在开始我们用 ...

  6. P2127 序列排序

    题目描述 小C有一个N个数的整数序列,这个序列的中的数两两不同.小C每次可以交换序列中的任意两个数,代价为这两个数之和.小C希望将整个序列升序排序,问小C需要的最小代价是多少? 输入输出格式 输入格式 ...

  7. Java23个设计模式的简明教程

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...

  8. BZOJ1293 [SCOI2009]生日礼物 【队列】

    题目 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩珠也可以出现在同一 ...

  9. BZOJ1927 [Sdoi2010]星际竞速 【费用流】

    1927: [Sdoi2010]星际竞速 Time Limit: 20 Sec  Memory Limit: 259 MB Submit: 2582  Solved: 1601 [Submit][St ...

  10. HttpClientUntils工具类的使用测试及注意事项（包括我改进的工具类和Controller端的注意事项【附 Json 工具类】）

    HttpClient工具类(我改过): package com.taotao.httpclient; import java.io.IOException; import java.net.URI; ...