首页
所有分类
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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JavaScript实现倒计时代码段Item1（非常实用）
Nov 03 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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) router(1) 接口(1) 乱码(3) 驱动模型(1) Scheduled(1) 扫雷(1) Date(1) 分区(2) 抽象类(1)
You might like
PHP实现文件安全下载
2006/10/09 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP7修改的函数
2021/03/09 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
xml文档转换工具，附图表例子(hta)
2010/11/17 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue之延时刷新实例
2019/11/14 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
python连接mongodb密码认证实例
2018/10/16 Python
python支付宝支付示例详解
2019/08/22 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能
2019/04/26 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
澳大利亚女性快速时尚零售商：Ally Fashion
2018/04/25 全球购物
慕尼黑山地运动、户外服装和体育用品专家：Sporthaus Schuster
2019/08/27 全球购物
应届大学生求职信
2013/12/01 职场文书
小学运动会开幕词
2015/01/28 职场文书
期中考试后的感想
2015/08/07 职场文书
工作报告范文
2019/06/20 职场文书