您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

javascript 实现 左侧导航栏 右侧页面跳转

2024/4/28 22:42:23发布31次查看
在网页设计中,导航栏是页面重要组成部分之一,它能够有效地帮助用户找到所需要的功能页面。常见的导航栏有顶部导航和左侧导航。而在交互设计中,实现导航栏及页面跳转便需要运用一些javascript的技巧。
本文将介绍如何使用javascript实现左侧导航栏,并配合右侧页面跳转,希望对初学者有所帮助。
一、界面布局
首先,我们需要确定关于导航栏的布局设计。在本次实例中,我们将左侧运用了树形结构的形式呈现,且选定字体为微软雅黑,颜色为#333,背景色为#fff;右侧页面块运用白色背景配合黑色字体,使整体页面简洁、美观。树形结构代码如下:
<ul class="tree"> <li> <span>导航1</span> <ul> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> </ul> </li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li></ul>
右侧页面块代码如下:
<div class="content"> <div class="title">标题</div> <div class="page">内容</div></div>
二、样式设置
在确定了布局设计后,便需要设置样式。在本次实例中,我们针对元素设置css样式,使页面看起来更优美。对于导航栏,我们需要设置ul、li、span、a 等元素的样式,代码如下:
.tree { list-style: none; margin: 0; padding: 0;}.tree li { margin-bottom: 3px;}.tree span, .tree a { display: block; padding: 5px; text-decoration: none;}.tree ul { margin: 0 0 0 20px;}.tree ul li { margin-bottom: 0;}
对于右侧页面块,我们需要设置边距、字体等样式,代码如下:
.content { margin: 20px; background-color: #fff;}.title { font-size: 20px; font-weight: bold; margin-bottom: 20px;}.page { font-size: 14px; line-height: 1.5;}
三、javascript代码
针对左侧导航栏,我们需要实现点击选中某一项后右侧页面跳转至对应的页面,并在选中的导航栏中添加样式标识。实现代码如下:
// 获取左侧导航栏中的所有li元素,以及右侧页面的所有内容块let lilist = document.queryselectorall('.tree li');let contentlist = document.queryselectorall('.content .page');// 为每个导航栏的a标签添加点击事件lilist.foreach(function (li, index) { let a = li.queryselector('a'); a.addeventlistener('click', function (e) { // 阻止a标签默认跳转事件 e.preventdefault(); // 遍历所有导航栏,将选中项样式设置为active,其他取消。 lilist.foreach(function (li) { li.classlist.remove('active'); }); li.classlist.add('active'); // 遍历所有页面块,只显示选中项的页面块,其他隐藏。 contentlist.foreach(function (content) { content.style.display = 'none'; }); contentlist[index].style.display = 'block'; });});
我们将代码保存为js文件,然后将其导入到页面中即可实现响应式导航栏,实现左侧导航栏及右侧页面跳转。
至此,我们便完成了本次实例的代码部分。通过这个简单的实例,相信读者对于如何使用javascript实现响应式导航栏及右侧页面跳转有了基本的认识,也可以在日后的网页设计中灵活应用。
以上就是javascript 实现 左侧导航栏 右侧页面跳转的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product