javascript入门实例：实现简单网页功能
2024-04-07 22:29:23
这两天做了一个简单的小网页，由于是初次接触HTML5和CSS，只实现了最基本的功能，后续会再对功能样式进行填充优化，这里记录一下。
实现效果：可通过切换上面的导航栏实现左侧导航栏的切换，并通过左侧导航栏的切换实现右侧具体导航内容的展示。
代码如下：
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>/*<!--横向导航栏的宽度、高度和整体样式-->*/#TopNav {height: 40px;background: #b3d4fc;border-radius: 5px;padding-left: 300px;}/*<!--导航各个栏目的宽度、高度和对齐方式-->*/#TopNav ul li {list-style-type: none;width: 110px;height: 40px;float: left;text-align: left;line-height: 40px;}/*<!--导航选项不显示下划线-->*/#TopNav ul li a{text-decoration: none;}/*<!--左侧导航栏样式-->*/#sidebar_left {background: #cccccc;padding: 10px;height: 500px;width: 150px;}/*<!--左侧导航栏导航项样式-->*/#sidebar_left nav ul li {list-style-type: none;width: 90px;font-size: 20px;padding-top: 15px;}/*<!--导航选项不显示下划线-->*/#sidebar_left ul li a{text-decoration: none;}#sidebar_right {width:350px;float:left;padding:10px;margin-left: 190px;margin-top: 60px;font-size: 20px;align-content: center;}/*<!--页脚样式-->*/#footer {background-color:#b3d4fc;color:white;clear:both;text-align:center;border-radius: 5px;padding:5px;}
</style>
<body><div id="TopNav"><nav><ul><li><a href="#/DefaultPage">首页</a></li><li><a href="#/SendInfo">信息发布</a></li><li><a href="#/Club">俱乐部</a></li><li><a href="#/Appraisal">民主测评</a></li></ul></nav></div><div id="SendInfo" style="display: none"><nav><ul><li><a href="#/ActivityDynamic">活动动态</a></li><li><a href="#/EmployeeBenefits">职工福利</a></li></ul></nav></div><div id="Club" style="display:none"><nav><ul><li><a href="#/FootBall">足球</a></li><li><a href="#/BasketBall">篮球</a></li><li><a href="#/Badminton">羽毛球</a></li><li><a href="#/Yoga">瑜伽</a></li></ul></nav></div><div id="Appraisal" style="display:none"><nav><ul><li><a href="#/Suggestions">合理建议</a></li><li><a href="#/Questionnaire">调查问卷</a></li></ul></nav></div><div id="sidebar_right"><p>PostManagementSystem</p></div><div id="sidebar_left"><nav><ul><li><a href="#/ActivityDynamic">活动动态</a></li><li><a href="#/EmployeeBenefits">职工福利</a></li></ul></nav></div><div id="ActivityDynamics" style="display: none"><p>This is Activity Dynamics!</p></div><div id="Employeebenefits" style="display: none"><p>This is Employee benefits!</p></div><div id="FootBall" style="display: none"><p>This is Football!</p></div><div id="BasketBall" style="display: none"><p>This is BasketBall!</p></div><div id="Badminton" style="display: none"><p>This is Badminton!</p></div><div id="Yoga" style="display: none"><p>This is Yoga!</p></div><div id="Suggestions" style="display: none"><p>This is Suggestions!</p></div><div id="Questionnaire" style="display: none"><p>This is Questionnaire!</p></div><div id="footer">Copyright www.bbcc.cn</div>
</body>
<script>(function(){var Router = function () {this.routes = {};//保存路由this.curUrl = '';//获取当前的hash值}Router.prototype.init = function () {//hashchange事件，当hash变化时，调用reloadPage方法//第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度window.addEventListener('hashchange', this.reloadPage.bind(this));}Router.prototype.reloadPage = function () {this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）this.routes[this.curUrl](); //运行当前hsah值对应的函数}Router.prototype.map = function( key, callback ){ //保存路由对应的函数：this.routes[key] = callback; //key表示hash的值（去掉#），callback表示当前hash对应的函数}window.oRou = Router;})(function(){var Router = function () {this.routes = {};//保存路由this.curUrl = '';//获取当前的hash值}Router.prototype.init = function () {//hashchange事件，当hash变化时，调用reloadPage方法//第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度window.addEventListener('hashchange', this.reloadPage.bind(this));}Router.prototype.reloadPage = function () {this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）this.routes[this.curUrl](); //运行当前hsah值对应的函数}Router.prototype.map = function( key, callback ){ //保存路由对应的函数：this.routes[key] = callback; //key表示hash的值（去掉#），callback表示当前hash对应的函数}window.oRou = Router;})var oRouter2 = new oRou();oRouter2.init();oRouter2.map('/DefaultPage',function () {var leftNav = document.getElementById("sidebar_left");var sendInfoControl = document.getElementById("SendInfo").innerHTML;leftNav.innerHTML = sendInfoControl;})oRouter2.map('/SendInfo',function () {var leftNav = document.getElementById("sidebar_left");var sendInfoControl = document.getElementById("SendInfo").innerHTML;leftNav.innerHTML = sendInfoControl;var rightNav = document.getElementById("sidebar_right");var ActivityDynamicControl = document.getElementById("ActivityDynamics").innerHTML;rightNav.innerHTML = ActivityDynamicControl;})oRouter2.map('/Club',function () {var leftNav = document.getElementById("sidebar_left");var clubControl = document.getElementById("Club").innerHTML;leftNav.innerHTML = clubControl;var rightNav = document.getElementById("sidebar_right");var footBallControl = document.getElementById("FootBall").innerHTML;rightNav.innerHTML = footBallControl;})oRouter2.map('/Appraisal',function () {var leftNav = document.getElementById("sidebar_left");var appraisalControl = document.getElementById("Appraisal").innerHTML;leftNav.innerHTML = appraisalControl;var rightNav = document.getElementById("sidebar_right");var suggestionsControl = document.getElementById("Suggestions").innerHTML;rightNav.innerHTML = suggestionsControl;})oRouter2.map('/ActivityDynamic',function () {var rightNav = document.getElementById("sidebar_right");var ActivityDynamicControl = document.getElementById("ActivityDynamics").innerHTML;rightNav.innerHTML = ActivityDynamicControl;})oRouter2.map('/EmployeeBenefits',function () {var rightNav = document.getElementById("sidebar_right");var employeeBenefitsControl = document.getElementById("Employeebenefits").innerHTML;rightNav.innerHTML = employeeBenefitsControl;})oRouter2.map('/FootBall',function () {var rightNav = document.getElementById("sidebar_right");var footBallControl = document.getElementById("FootBall").innerHTML;rightNav.innerHTML = footBallControl;})oRouter2.map('/BasketBall',function () {var rightNav = document.getElementById("sidebar_right");var basketBallControl = document.getElementById("BasketBall").innerHTML;rightNav.innerHTML = basketBallControl;})oRouter2.map('/Badminton',function () {var rightNav = document.getElementById("sidebar_right");var badmintonControl = document.getElementById("Badminton").innerHTML;rightNav.innerHTML = badmintonControl;})oRouter2.map('/Yoga',function () {var rightNav = document.getElementById("sidebar_right");var yogaControl = document.getElementById("Yoga").innerHTML;rightNav.innerHTML = yogaControl;})oRouter2.map('/Suggestions',function () {var rightNav = document.getElementById("sidebar_right");var SuggestionsControl = document.getElementById("Suggestions").innerHTML;rightNav.innerHTML = SuggestionsControl;})oRouter2.map('/Questionnaire',function () {var rightNav = document.getElementById("sidebar_right");var QuestionnaireControl = document.getElementById("Questionnaire").innerHTML;rightNav.innerHTML = QuestionnaireControl;})
</script>
</html>
javascript入门实例：实现简单网页功能相关推荐
- html制作计算器val,JavaScript实现的超简单计算器功能示例
本文实例讲述了JavaScript实现的超简单计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码: www.ddpool.cn JS计算器 // window.onload 获 ...
- javascript小实例，PC网页里的拖拽（转）
这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...
- node工程默认url_node 爬虫入门实例，简单易懂
前言 本文介绍一个 koa 的爬虫项目,受众对象为初学前端不久的小伙伴,通过这个项目能对 node 爬虫有一个简单的认识,也能自己动手写一些简单的爬虫.项目地址: Fe-Icy/firm-spider ...
- html自学网页制作,HTML入门学习教程:简单网页制作
用一分钟制作自己的第一个网页: 下面我们来试着做一个简单的网页,希望您能跟着我们操作,这只会花费您一分钟时间.现在您也许不知道那些尖括号"<>"和里面的字母究竟是些什么 ...
- 自学html手机网页设计,HTML_XHTML入门学习教程:简单网页制作，用一分钟制作自己的第一个网 - phpStudy...
用一分钟制作自己的第一个网页: 下面我们来试着做一个简单的网页,希望您能跟着我们操作,这只会花费您一分钟时间.现在您也许不知道那些尖括号"<>"和里面的字母究竟是些什么 ...
- 零基础JavaScript入门教程(2)–在网页中使用JS
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 网页中使用JS 3. 小结 1. 前言 上一篇,给大家聊了很多关于JS的事情,大家想必已经迫不及待,想知道如何在网页中使用JS. 本篇就 ...
- JavaScript入门实例(1)
1.按键事件实现改变文字内容 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- python爬虫入门实例-Python爬虫快速入门：基本结构简单实例
本爬虫系列入门教程假设读者仅有一点点Python基础或者近乎为零的基础.如果是有Python基础的可以跳过一些对于Python基本知识的补充. 爬虫能干什么呢?一句话概括,正常通过浏览器可以获取的数据 ...
- Web入门(1)——制作简单的网页
文章目录 安装基础软件 设计网站外观 做出计划 绘制草图 选定内容 文本 主题颜色 图像 字体 处理文件 网站应保存在何处? 关于大小写和空格的提示 网站应该使用什么结构? 文件路径 安装基础软件 计 ...
最新文章
- SpringMVC过程中@RequestBody接收Json的问题 总是报415
- jQuery鼠标事件（转）
- flowable画图教程_flowable画图教程_Flowable 学习笔记
- 个人总结：性能测试常见问题案例与原因
- 【算法分析与设计】DFS与BFS的区别
- 一走进书房的QuickDove
- 两个链表第一个公共节点
- cmake编译动态库和静态库
- Android-StepsView
- Windows was unable to connect to wifi 电脑windows连不上路由器但是连得上手机wifi？
- 在delphi中调用chm帮助文件_delphi教程
- swift 使用Moya进行网络请求
- MVC模式和DDD模式对比，谁才是银弹？
- create Golang project with method
- 我在百度大脑用数据看《你好，李焕英》
- 计算机word表格基础,Word表格的作-计算机基础.doc
- 专业计算机术语中英文对照（二）
- 利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局
- iOS开发——播放系统音效、自定义音效
- Linux、Windows常见端口号大全