jquery 面包屑导航

最新推荐文章于 2023-07-04 23:54:46 发布
最新推荐文章于 2023-07-04 23:54:46 发布
阅读量4.9k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyanwen888/article/details/8850215
版权 
<!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>

wuyanwen888
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
圆形风格面包屑导航
01-05
jquery圆形风格面包屑导航 形状、个性相当不错
jquery 面包屑导航 具体实现
10-27
jquery 面包屑导航 具体实现，需要的朋友可以参考一下
jquery 面包屑导航
一直在路上
03-17 7569
<!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左侧导航栏
JS实现面包屑功能（拿来及用）
最新发布
m0_71966801的博客
07-04 340
【代码】JS实现面包屑功能（拿来及用）
js实现iframe框架的面包屑功能
杜永康的博客
04-25 1932
iFrame全称是HTML中的一个标签，用于在一个HTML文档中嵌入另一个HTML文档。iFrame框架可以将一个HTML文档嵌入到另一个HTML文档中的一个独立的窗口中，这个窗口可以独立于主窗口进行加载和渲染。在一个页面中嵌入另一个页面，例如在一篇文章中嵌入一段视频。在一个页面中嵌入一个广告，可以独立加载和渲染，不影响主页面的性能。在一个页面中嵌入一个登录框，可以通过iFrame框架实现跨域登录。
面包屑导航
ChengoShan的博客
02-24 1649
面包屑是我们在项目开发过程中比较常用的导航形式，市场上也有很多的插件可以用，但是小程序开发中限于包的大小，这种简单的导航引一个插件得不偿失，所以可以选择手撸是最好的方式。该篇文章原理上解释了面包屑的实现原理，应该指的大家借鉴。
jQuery面包屑型导航插件 - JCrumb
xautjzd小天地
04-08 5063
近来开始学习jquery，今天学习了jquery的面包屑导航菜单插件JCrumb，现和大家分享： JCrumb是一个轻量级的jQuery插件，经压缩后只有2kb大小。JCrumb能让你轻松的在任意页面上创建面包屑导航路径，可定制性也很高，可以自定义CSS样式，也可以与jQuery UI的样式整合。  最基本的使用方法 $(document).ready(function(){
面包屑导航 java_jquery 面包屑导航 具体实现
weixin_30427953的博客
02-21 197
YanCms左侧导航栏$(document).ready(function () {//#title代表页面中点击的元素$(".title").click(function () {var con = $(this).html();//#getTitle代表页面中想要得到title的值元素$("#getTitle").html(con);//$(this).attr('href')获取超链接var...
【仅适合初学者】html+css实现面包屑导航
05-16
html+css 实现面包屑导航，无js 效果
近百个jQuery实例
06-11
参照《jQuery完全攻略》亲自手打并测试的100多个实例（部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法）。 主要分为： jQuery操作DOM节点、数组和字符串 jQuery表单验证 jQuery事件处理 jQuery页面导航（这部分内容较少，增加了几个纯CSS实现） jQuery视觉特效（这部分内容最丰富）。 每个实例都有简洁的注释，基本上原书的精髓都汇聚于此。另外附带jQuery可视化API一份。 希望大家学习jQuery愉快！
jquery-rcrumbs:用于创建响应式面包屑的 jQuery 插件
06-25
rCrumbs ─ 响应式面包屑 rCrumbs 又名responsiveCrumbs aka resizableCrumbs 是一个jQuery 插件，它将一堆列表项元素转换为响应式面包屑。 显示的导航项目数量根据浏览器窗口中的可用空间动态调整。 演示 提供演示 下载 插件的 javascript 和 css 文件可以在 dist/ 文件夹中找到。 有开发版和生产版（缩小版）可用。 鲍尔 要使用 bower 安装插件，请使用以下命令： bower install jquery-rcrumbs 用法 包含插件 css 文件： < link rel =" stylesheet " type =" text/css " href =" jquery.rcrumbs.css " > 在页面上包含 jQuery 和插件： < script src =" jquery.js " >
9种响应式面包屑导航和分步导航指示器UI设计
12-13
这是一组非常漂亮的响应式面包屑导航和分步导航指示器UI设计效果。这组UI设计中有5个面包屑导航和4个分步导航指示器效果。它们都使用相同的HTML结构，并带有一组预定义的CSS样式，使用上非常方便。
thinkphp实现面包屑导航（当前位置）例子分享
10-25
今天把博客一些细节完善了一下，其中修改了一下栏目页和文章页中的“当前位置”。
css3面包屑导航 css3面包屑导航代码下载.zip
11-17
css3面包屑导航 css3面包屑导航代码下载.zip
CSS3圆形风格面包屑导航.zip
11-17
CSS3圆形风格面包屑导航.zip
jquery手写面包屑 进度条 （已完成/正在进行/待完成三种状态）
NOyesNONO_的博客
02-08 923
小logo可以变化，我在iconfont.com里找了三种，不是很合适，这里只是发博客用。项目里ui会给图的 代码： <!-- 目标位置包裹面包屑，jquery失效的话去bootcdn找一个 --> <div class="nav-wrap"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> /*...
SEO之面包屑导航
weixin_34419326的博客
11-01 172
面包屑导航作为网站优化中经典的一个优化方案，尤其一定的作用，如电子铭牌网站的建设，采用面包屑导航，主要作用是： 　　1、为了让用户在浏览网站时能够明确的浏览页面位置，同时可以方便用户返回上一级菜单，符合用户体验; 　　2、从网站优化的角度来说，符合用户体验的设计思路本身就有利于网站优化，同时有利于提升某些关键词的排名。 　　面包屑导航(BreadcrumbNavigation)这个概念来自童...
请用bootstrap写一个面包屑导航栏，左侧可插入logo图片，右侧有一个面包屑导航栏
05-31
以下是一个示例代码，实现了一个包含面包屑导航栏和Logo图片的基本布局。需要注意的是，这只是一个示例代码，具体的样式和布局可以根据具体需求进行调整。 ```HTML <!DOCTYPE html> <html> <head> <title>面包屑导航栏</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <style> .logo { margin-top: 10px; margin-left: 20px; height: 40px; } .breadcrumb { margin-top: 20px; margin-bottom: 0; background-color: #f2f2f2; padding: 10px; border-radius: 0; font-size: 16px; font-weight: 600; } .breadcrumb a { color: #333; text-decoration: none; } .breadcrumb a:hover { color: #0066cc; text-decoration: underline; } </style> </head> <body> <nav class="navbar navbar-expand-md bg-light navbar-light"> <a class="navbar-brand" href="#"><img src="logo.png" class="logo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"></ul> <form class="form-inline"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </div> </nav> <div class="container-fluid"> <nav aria-label="breadcrumb" class="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> </div> </body> </html> ``` 在这个示例代码中，使用了Bootstrap提供的导航栏、面包屑和Logo图片等组件。其中，导航栏包含Logo图片和面包屑导航栏，面包屑导航栏用于显示当前页面的位置信息。在样式方面，对Logo图片和面包屑导航栏进行了简单的调整，使其适应不同的屏幕尺寸和设备类型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值