纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

jquery 面包屑导航 具体实现

  2020-05-13 我要评论

复制代码 代码如下:

<!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><https://cdn9.52xs.com.cn/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>
        <https://cdn9.52xs.com.cn/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><https://cdn9.52xs.com.cn/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>
  <https://cdn9.52xs.com.cn/div>

 </body>
</html>


相关文章

猜您喜欢

  • jquery插件开发注意事项小结

    Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(紧缩后只要21k) ,它兼容CSS3,还兼容各种阅读器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)..
  • 左侧是表头的JS表格控件(自写,网上没有的)

    左侧是表头的JS表格大家有木有遇到过呀,真实是没有发现,于是本人入手饥寒交迫,特献上完成代码与大家共享,有相似需求的朋友能够参考下哈..

网友评论

Copyright 2020 www.kgesoft.com 【K歌软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式