首先引用JQ文件,下面是所有代码;

主页面代码:

数据库数据:

脚本文件:

function addli(object) {
    var text = object.innerText;
    var url = object.id;

var html = "<div class=\"r_right_nav_div\" οndblclick=\"r_right_dclick(this)\"><a οnclick=\"r_right_link(this)\" class=\"r_nav_text\" id=" + url + ">" + text + "</a></div>"

var divcount = $("#r_nav").find("div").length;
    var eqcount = 0;

for (var i = 0; i < divcount; i++) {
        var nowtext = $("#r_nav div:eq(" + i + ")").find("a").attr("innerText");
        if (nowtext == text) {
            eqcount++;
        }
    }

if (eqcount < 1) {
        $("#r_nav").append(html);
    }

$("#r_Frame_content").attr("src", url);

}
function r_right_link(object) {

var url = object.id;
    $("#r_Frame_content").attr("src", url);

}

function r_right_dclick(object) {
    object.parentNode.removeChild(object);

}
jQuery(function () {

$(".link_to_left").mouseover(function () {

$.getJSON("Handles/GetNavSon.ashx", { sign: $(this).attr("id") }, function (data) {
            if ($(".link_to_left:hover").parent().find("li").length < 1) {
                for (var i = 0; i < data.length; i++) {
                    var name = data[i].ModuleName;
                    var url = data[i].ModuleURL;
                    $(".link_to_left:hover").parent().append("<ul><li class=\"asd\"><a οnclick=\"addli(this)\" id=" + url + ">" + name + "</a></li><ul>");

}
            }
        })
    });

$("#nav").mouseleave(function () {
        $(".asd").remove();
    })

})

Css文件:

*
{
    margin: 0 0;
    padding: 0;
}
#content
{
    width: 100%;
    border: 2px solid black;
    height: 600px;
    margin:0 auto;
}
#info{ background:gray;}
#title
{
    height: 100px;
 
    width: 100%;
}

#nav{ height:30px; width:100%;  background-color:gray; }
#nav ul li{ float:left;width:130px; list-style-type:none;padding:5px;color:white;font-family:@PMingLiU;}
#nav ul .asd{ background-color:Gray; }

#nav ul .asd a{color:Black; text-decoration:none;font-family:@PMingLiU; }
#nav ul .asd a:hover{ color:White;}

#left{ width:15%;height:470px;float:left;}

#right{ width:100%;height:470px; float:right;}
#right #r_nav{ height:30px;width:100%; border:1px solid red;} 
#right #r_nav div{ text-align:center; vertical-align:middle; height:30px;width:90px; float:left;color:white;font-style:italic; margin-left:30px; background:url(/inc/image/r_nav_bg.jpg)}
#right #r_nav div a{  margin-top:10px;font-size:14px;}
#right #r_nav div:hover{ cursor:default; color:Blue; background:url(/inc/image/r_nav__hover_bg.jpg) }
#right #r_content{ height:440px;width:100%;}

转载于:https://www.cnblogs.com/Mr-Joe/archive/2012/01/05/2313017.html

JQ简单二级导航,加子导航栏相关推荐

  1. android手机改车载,到底手机导航还是车载导航好,我选择在车上加装安卓大屏...

    到底手机导航还是车载导航好,我选择在车上加装安卓大屏 2017-06-12 18:38:38 52点赞 66收藏 74评论 这几年随着国民经济和技术水平的提升,汽车早已不是以前那种高不可攀的奢侈品,不 ...

  2. Html+Css新手简单快速仿京东商品分类导航

    看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果,学会了之后,会发现大多数电商都是用这样的效果的. 我们先从把结构写好:一个nav包含上面一个div(全部商品分类),一 ...

  3. 通过url判断当前页,动态给导航加样式

    //通过url判断当前页,动态给导航加样式 var str =location.pathname; var index = str.lastIndexOf("\/"); str = ...

  4. JAVA竖向导航栏,css实现横向导航和竖向导航栏的方法(代码)

    本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.竖向导航 ul{ list-style-type:non ...

  5. android 导航键和导航栏的显示隐藏

    //导航键和导航栏的隐藏 private void hideSystemUI() {getWindow().getDecorView().setSystemUiVisibility(View.SYST ...

  6. vue的一、二级路由、路由导航、路由模式、404、

    路由 通过路由就可以让我们的vue项目完成 页面之间的跳转 同时展示多个页面 路由-可以实现SPA(单页面应用)只有一个html页面的应用 模拟多个页面的跳转 传统项目 如果想完成多个页面 那么就要几 ...

  7. 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

    原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul ...

  8. vue-router进阶:路由使用归纳、路由导航守卫、导航守卫解析流程、

    一.定义和理解 导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...

  9. 基于百度地图sdk的地图app开发(七)——导航和模拟导航

    这是基于百度地图sdk的地图app开发系列博客第七篇 代码仓库位置:https://github.com/YanhuiLu89/lmap.git 上一篇 基于百度地图sdk的地图app开发(六)--路 ...

最新文章

  1. 计算机科学与技术python方向是什么意思-第一模块·开发基础-第1章 Python基础语法...
  2. 多重背包2[二进制位优化]
  3. iOS之coreData
  4. 【Python】青少年蓝桥杯_每日一题_5.09_画三角形和六边形
  5. 高级用户 java_java高级-基本
  6. SharePoint 2007 Select People and Groups中搜索不到其他Domain账户的问题[已解决]
  7. snmp在php中的使用,在php中转换python代码以计算snmpvlan掩码的最佳方法
  8. android开发蓝牙快速读写有问题,【报Bug】安卓低功耗蓝牙写入时10007,特征无写入权限,IOS正常读写...
  9. ELK-Metricbeat安装及使用
  10. HDU-5857-Median
  11. 汇佳学校|多元艺术+探究式思维 领航国际艺术教育新趋势
  12. 【内核调度、负载均衡】【find_busiest_group】
  13. Python提取pcap文件中原始数据
  14. Android初学习之四:知晓当前是哪一个活动和随时随地退出程序
  15. 虚拟化在防泄密领域的痛点
  16. 血泪教训,机械硬盘间歇性罢工,机械硬盘不显示或者显示“硬盘出现致命错误”怎么办
  17. 众包置信度:改进众包数据标记的贝叶斯推断
  18. outlook express 邮件附件都带有att000xxx.htm 附件?
  19. PS将多个图片合并成长图
  20. 问题记录:virsh start error:cannot get interface MTU on 'qbrXXX':No such device

热门文章

  1. 用python导出pptx中每一页的标题
  2. android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
  3. c语言判断字符串的编码,C语言中判断一个char*是不是utf8编码
  4. linux 运行java工程师_java工程师linux命令,这篇文章就够了
  5. rk修改launcher_RK launcher V 0.41 官方版
  6. python 乘法内置函数_Python内置函数--reversed()
  7. bootstrap 步骤条_无骨香酥炸鸡柳,做法原来如此简单,3个关键步骤,学会可以开店...
  8. python中xpath定位_xpath最新:关于python中的xpath解析定位_爱安网 LoveAn.com
  9. 2016蓝桥杯C++A:剪邮票(抓取法)
  10. UnityShader4:UnityShader的形式