首页
所有分类
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 对话框和状态栏使用说明
Oct 25 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
js获取图片宽高的方法
Nov 25 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
jQuery事件详解
Feb 23 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
layui--js控制switch的切换方法
Sep 03 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
tree shaking(1) 分布式追踪(1) MutationObserver(1) HBuilder(1) Express(1) kubernetes(1) 条形码(1) Three.js(1) OOP(1) GPU(1)
You might like
德生PL990，目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP面向对象编程快速入门
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JS打印gridview实现原理及代码
2013/02/05 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
js表头排序实现方法
2015/01/16 Javascript
asp.net中oracle 存储过程（图文）
2015/08/12 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python import自定义模块方法
2015/02/12 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python skimage 连通性区域检测方法
2018/06/21 Python
django用户登录和注销的实现方法
2018/07/16 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python爬取某平台短视频的方法
2021/02/08 Python
Janie and Jack美国官网：GAP旗下的高档童装品牌
2019/09/09 全球购物
Vita Fede官网：在意大利手工制作，在纽约市设计
2019/10/25 全球购物
旷课检讨书大全
2014/01/21 职场文书
服务生自我鉴定
2014/01/22 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
爱晚亭导游词
2015/02/09 职场文书
民主生活会主持词
2015/07/01 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS