首页
所有分类
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中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
JS ES6异步解决方案
Apr 29 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
flex(1) 匹配文本(1) SFTP(3) canvas(2) 文字识别(1) GNN(1) flex-shrink(1) 追加文本(1) 图片模糊(1) 选择器(1)
You might like
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
js中开关变量使用实例
2017/02/24 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
js随机生成一个验证码
2017/06/01 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python字符串循环左移
2019/03/08 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python多进程编程常用方法解析
2020/03/26 Python
Python同时迭代多个序列的方法
2020/07/28 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
人力资源主管岗位职责
2014/01/29 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书