首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery 面包屑导航 具体实现

Posted in Javascript onJune 05, 2013 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>YanCms左侧导航栏</title> 
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            //#title代表页面中点击的元素 
            $(".title").click(function () { 
                var con = $(this).html(); 
                //#getTitle代表页面中想要得到title的值元素 
                $("#getTitle").html(con); 
                //$(this).attr('href')获取超链接 
                var con1 = $(this).attr('href'); 
               // $("#getTitle").attr("href", "con1"); 
               // alert(con1); 
            }); 
        }); 
   </script> 
    <script type="text/javascript"> 
        jQuery().ready(function () { 
            jQuery("#navigation").accordion({ 
                header: '.head', 
                event: 'click', 
                fillSpace: true, 
                animated: 'bounceslide' 
            }); 
        }); 
    </script> 
    <link href="css/left.css" rel="stylesheet" type="text/css" /> 
    </head> 
<body style="background-color:#e6f4fa;" > 
        <div class="subMenuTitle" id="getTitle"><a href="#">主功能菜单</a></div> 
        <div style="height:100%;"> 
            <ul id="navigation"> 
                <li> 
                    <a class="head">类别管理</a> 
                    <ul> 
                        <li class="title"> 
                            <a href="#1233333" >博文列表</a> 
                        </li>                         <li class="title"> 
                            <a href="#">添加博文</a> 
                        </li> 
                    </ul> 
                </li> 
                <li> 
                    <a class="head">类别管理</a> 
                    <ul> 
                        <li> 
                            <a href="#" target="rightFrame"> 类别列表</a> 
                        </li> 
                    </ul> 
                </li> 
                <li> 
                    <a class="head">友情链接</a> 
                    <ul> 
                        <li> 
                            <a href="#" target="rightFrame"> 链接列表</a> 
                        </li> 
                        <li> 
                            <a href="#" target="rightFrame">添加链接</a> 
                        </li> 
                    </ul> 
                </li> 
                <li> 
                    <a class="head">系统管理</a> 
                    <ul> 
                        <li> 
                            <a href="#" target="rightFrame">修改管理员密码</a> 
                        </li> 
                     
                    </ul> 
                </li> 
                <li> 
                    <a class="head">权限管理</a> 
                    <ul> 
                        <li> 
                            <a href="#" target="rightFrame">暂未开放</a> 
                        </li> 
                        <li> 
                            <a href="#" target="rightFrame">暂未开放</a> 
                        </li> 
                     
                    </ul> 
                </li> 
            </ul> 
        </div> 
    </body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>YanCms左侧导航栏</title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //#title代表页面中点击的元素
            $(".title").click(function () {
                var con = $(this).html();
                //#getTitle代表页面中想要得到title的值元素
                $("#getTitle").html(con);
                //$(this).attr('href')获取超链接
                var con1 = $(this).attr('href');
               // $("#getTitle").attr("href", "con1");
               // alert(con1);
            });
        });
   </script>
    <script type="text/javascript">
        jQuery().ready(function () {
            jQuery("#navigation").accordion({
                header: '.head',
                event: 'click',
                fillSpace: true,
                animated: 'bounceslide'
            });
        });
 </script>
    <link href="css/left.css" rel="stylesheet" type="text/css" />
 </head>
<body style="background-color:#e6f4fa;" >
        <div class="subMenuTitle" id="getTitle"><a href="#">主功能菜单</a></div>
  <div style="height:100%;">
   <ul id="navigation">
    <li>
     <a class="head">类别管理</a>
     <ul>
      <li class="title">
       <a href="#1233333" >博文列表</a>
      </li>
      <li class="title">
       <a href="#">添加博文</a>
      </li>
     </ul>
    </li>
    <li>
     <a class="head">类别管理</a>
     <ul>
      <li>
       <a href="#" target="rightFrame"> 类别列表</a>
      </li>
        </ul>
    </li>
    <li>
     <a class="head">友情链接</a>
     <ul>
      <li>
       <a href="#" target="rightFrame"> 链接列表</a>
      </li>
      <li>
       <a href="#" target="rightFrame">添加链接</a>
      </li>
     </ul>
    </li>
    <li>
     <a class="head">系统管理</a>
     <ul>
      <li>
       <a href="#" target="rightFrame">修改管理员密码</a>
      </li>
     
     </ul>
    </li>
    <li>
     <a class="head">权限管理</a>
     <ul>
      <li>
       <a href="#" target="rightFrame">暂未开放</a>
      </li>
      <li>
       <a href="#" target="rightFrame">暂未开放</a>
      </li>
     
     </ul>
    </li>
   </ul>
  </div>
 </body>
</html>

jquery 面包屑导航 具体实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 #Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 #Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 #Javascript
Javascript自定义排序 node运行 实例
Jun 05 #Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 #Javascript
jquery实现控制表格行高亮实例
Jun 05 #Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 #Javascript
计时器(1) 定时任务(2) 绘图(1) MYSQL函数(1) turtle(1) mysql.user(1) limit(1) Mysql报错(1) offset(1) 逻辑架构(1)
You might like
PHP判断指定时间段的2个方法
2014/03/14 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
angularJS 入门基础
2015/02/09 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python逆向入门教程
2018/01/15 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python实现弹球小游戏
2020/08/01 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
怎样声明接口
2014/09/19 面试题
幼儿园教师备课制度
2014/01/12 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
服装店营销方案
2014/03/10 职场文书
合作协议书范本
2014/04/17 职场文书
安全生产承诺书范文
2014/05/22 职场文书
岗位说明书怎么写
2014/07/30 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
小学教师个人总结
2015/02/05 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python