怎么使用javascript实现左侧导航栏并配合右侧页面跳转-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

本文小编为大家详细介绍“怎么使用javascript实现左侧导航栏并配合右侧页面跳转”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用javascript实现左侧导航栏并配合右侧页面跳转”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都做网站、偃师网络推广、小程序定制开发、偃师网络营销、偃师企业策划、偃师品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供偃师建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

一、界面布局

首先，我们需要确定关于导航栏的布局设计。在本次实例中，我们将左侧运用了树形结构的形式呈现，且选定字体为微软雅黑，颜色为#333，背景色为#fff;右侧页面块运用白色背景配合黑色字体，使整体页面简洁、美观。树形结构代码如下：

右侧页面块代码如下：


    标题

内容

二、样式设置

在确定了布局设计后，便需要设置样式。在本次实例中，我们针对元素设置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实现左侧导航栏并配合右侧页面跳转
链接分享：http://scyingshan.cn/article/gipoji.html

新闻中心

其他资讯