首页
所有分类
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拓展String方法小结
Jul 08 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
geoserver(1) lua(3) 匹配(1) 相对定位(1) sql模式(1) 绝对定位(1) 全表扫描(1) ref(1) 索引树扫描(1) postcss-px2rem(1)
You might like
十天学会php之第五天
2006/10/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
smarty的保留变量问题
2008/10/23 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Web Inspector：关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
Javascript实现快速排序（Quicksort）的算法详解
2015/09/06 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
详解angular element()方法使用
2017/04/08 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
Python LMDB库的使用示例
2021/02/14 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
Oroton中国官网：澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国排名第一的停车场运营商：NCP
2019/08/26 全球购物
Timberland法国官网：购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
指针和引用有什么区别
2013/01/13 面试题
司机的工作范围及职责
2013/11/13 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
运动会报道稿300字
2014/10/02 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Django路由层如何获取正确的url
2021/07/15 Python