首页
所有分类
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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
Bootstrap项目实战之首页内容介绍（全）
Apr 25 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 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
人工智能(2) opencv(7) 五子棋(12) Pyecharts(7) FuzzyWuzzy(1) 井字棋(1) 模型保存加载(1) 图像处理(1) 模糊匹配(1) PyTorch(1)
You might like
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
使用Python读取大文件的方法
2018/02/11 Python
儿童学习python的一些小技巧
2018/05/27 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python对excel的基本操作方法
2021/02/18 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
俄语地区最大的中国商品在线购物网站之一：Umka Mall
2019/11/03 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
生产部厂长助理职位说明书
2014/03/03 职场文书
2014年调度员工作总结
2014/11/19 职场文书
狮子林导游词
2015/02/03 职场文书
三八妇女节寄语
2015/02/27 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python