首页
所有分类
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 相关文章推荐
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
js实现模拟购物商城案例
May 18 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) Pytesseract(1) 进度条(1) PIL(1) 柱状图(1) 裁剪图片(1) Python(3) GCN(1) Flask(2) 验证码(1)
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
javascript中 try catch用法
2015/08/16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Node.js实现用户评论社区功能（体验前后端开发的乐趣）
2019/05/09 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
深入浅析Python的类
2018/06/22 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
Orlebar Brown官网：设计师泳裤和泳装
2020/12/08 全球购物
研究生自荐信
2013/10/09 职场文书
自我评价如何写好？
2014/01/05 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
学生会竞聘书范文
2014/03/31 职场文书
服装发布会策划方案
2014/05/22 职场文书
2014年学校工作总结
2014/11/20 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Python如何配置环境变量详解
2021/05/18 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技