使用javascript实现左侧导航栏并配合右侧页面跳转

发布时间：2023-10-16 12:00:55 所属栏目：教程来源：互联网

导读： 　　为大家详细介绍“怎么使用javascript实现左侧导航栏并配合右侧页面跳转”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用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文件，然后将其导入到页面中即可实现响应式导航栏，实现左侧导航栏及右侧页面跳转。

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!