首页
所有分类
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 数据类型转换总结笔记
Jan 17 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
用webpack4开发小程序的实现方法
Jun 04 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
默认端口(3) 负载均衡(6) http(6) 生成缩略图(1) 反向代理(2) 动静分离(1) reload(1) shell(3) 防盗链(1) 前后端分离(1)
You might like
PHP的加密方式及原理
2012/06/14 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
那些年我们错过的魔术方法（Magic Methods）
2014/01/14 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Python面向对象进阶学习
2019/05/21 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
python实现猜拳游戏项目
2020/11/30 Python
英国旅行箱包和行李箱购物网站：Travel Luggage & Cabin Bags
2019/08/26 全球购物
西班牙在线光学：Visual-Click
2020/06/22 全球购物
巡警年度自我鉴定
2014/02/21 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
房产代理公证处委托书
2014/04/04 职场文书
《秋游》教学反思
2014/04/24 职场文书
铁路安全反思材料
2014/12/24 职场文书
任命通知范文
2015/04/21 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
如何书写公司员工保密协议？
2019/06/27 职场文书
python垃圾回收机制原理分析
2022/04/13 Python