javascript 实现 左侧导航栏 右侧页面跳转
在网页设计中，导航栏是页面重要组成部分之一，它能够有效地帮助用户找到所需要的功能页面。常见的导航栏有顶部导航和左侧导航。而在交互设计中，实现导航栏及页面跳转便需要运用一些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 实现 左侧导航栏 右侧页面跳转的详细内容，更多请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
