首页
所有分类
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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
使用js画图之画切线
Jan 12 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
AngularJS发送异步Get/Post请求方法
Aug 13 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) 弱口令(1) 内存(1) 策略(1) 访问日志(2) PV(1) ipv6(1) UV(1) 线程(1) 缓存(3)
You might like
PHP分页显示制作详细讲解
2006/10/09 PHP
什么是MVC，好东西啊
2007/05/03 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
ExtJS自定义主题（theme）样式详解
2013/11/18 Javascript
7个JS基础知识总结
2014/03/05 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
深入探究node之Transform
2017/07/20 Javascript
小程序实现多列选择器
2019/02/15 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
深入浅出学习python装饰器
2017/09/29 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
浅谈Python3中print函数的换行
2020/08/05 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴：Balfour
2018/11/01 全球购物
英国设计的甲板鞋和船鞋：Chatham
2018/12/06 全球购物
加拿大户外探险购物网站：SAIL
2020/06/27 全球购物
一套.net面试题及答案
2016/11/02 面试题
RIP版本1跟版本2的区别
2013/12/30 面试题
设计模式的基本要素是什么
2014/04/21 面试题
技术经理的自我评价范文
2013/12/03 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
个人德育工作总结
2015/03/05 职场文书
二审代理词范文
2015/05/25 职场文书
妇产科护理心得体会
2016/01/22 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python