首页
所有分类
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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 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
责任书(145) 竞聘书(31) 意向书(73) 聘任书(31) 委托书(259) 广告词(105) 主持词(345) 担保书(46) 建议书(203) 承诺书(369)
You might like
在PHP中使用模板的方法
2008/05/24 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
Python中return self的用法详解
2018/07/27 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
如何使用python进行pdf文件分割
2019/11/11 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
澳大利亚体育和露营装备在线/实体零售商：Find Sports
2020/06/03 全球购物
信息管理员岗位职责
2013/12/01 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
检讨书范文2000字
2015/01/28 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
求职信如何撰写？
2019/05/22 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
深入理解Pytorch微调torchvision模型
2021/11/11 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL