首页 > 下载 > 下载详文:Javascript获取url参数动态页面

Javascript获取url参数动态页面

发布时间:2011年05月07日 09时20分28秒   属性:程序Web开发 > Javascript/Html    访问次数:95165
字体: 初始 添加收藏 分享给好友
Javascript 获取url参数动态控制页面

在Web开发中url 动态参数,是再熟悉不过的,如果是ASP.NET、ASP、JSP、PHP它们都有各自的 url传参接受参数的方法,那么Html中采用Javascript也同样可以进行动态参数获取实现参数参数控制页面。在本示例中将展现Javascript 获取url,通过url参数来控制页面显示,下面是本程序示例的效果,通过url参数控制页面,右边菜单发送url参数(注意菜单点击的url参数)。

布局左边显示主体内容class属性为"mainContent" 即 "float:left; width:550px; height:400px;border:2px solid #27048b"; 右侧为菜单显示class属性为"rightMain"即"float:left;width:150px; padding-top:5px",然后内嵌入四个div显示详细菜单同时赋予class属性"rightMenu"即" padding:3px;padding-left:1px;",菜单内容中为超链接连接地址指向当前页,在页面连接地址后面加以菜单的指定参数"?App=asp"、"?App=jsp"、"?App=php"。下面是Style 样式和body段代码。

HTML 代码  复制
<style type="text/css"> .rightMenu { padding:3px;padding-left:1px; } .rightMenuContent { /*background-color:#aaaaaa;*/ padding:5px } .mainContent { float:left; width:550px; height:400px;border:2px solid #27048b } .rightMain { float:left;width:150px; padding-top:5px } </style> <body> <div class="mainContent"> </div> <div class="rightMain"> <div class="rightMenu" > <div id="aspnet" class="rightMenuContent" > <a href="HTMLPageTest.htm" class="alink" style=" padding-left:10px">
ASP.NET平台
</a> </div> </div> <div class="rightMenu" > <div id="asp" class="rightMenuContent"> <a href="HTMLPageTest.htm?App=asp" class="alink" style="padding-left:10px">
ASP环境
</a> </div> </div> <div class="rightMenu" > <div id="jsp" class="rightMenuContent" > <a href="HTMLPageTest.htm?App=jsp" class="alink" style="padding-left:10px">
JSP平台</a>
</div> </div> <div class="rightMenu" > <div id="php" class="rightMenuContent" > <a href="HTMLPageTest.htm?App=php" class="alink" style="padding-left:10px">
PHP平台
</a> </div> </div> </div> </body>

Javascript 脚本编写

Javascript 引入jquery,jquery能够为 js 脚本编写带来非常大的帮助,如通过js指定css样式,或修改元素的参数值通过jquery能够非常快捷方便的完成。

程序脚本思路 先通过"location.search"获取 url 的参数格式为"?App=XXXX"赋给变量"url",然后定义 OverFouse() 方法,OverFouse() 方法执行过,第一步给菜单class属性为".rightMenuContent"的指定背景色为"#aaaaaa",第二步拆分变量"url"获取url地址的App值,然后进入条件判断指定匹配菜单的背景色设置为"#27048b",同时设定主题显示的Html值即class属性为".mainContent"。

HTML 代码  复制
<script src="../com/javascript/jquery-1.4.2.min.js" type="text/javascript"/> <script type="text/javascript"> var url = location.search;//url参数"?App=XXXX" //var myurl = window.location.href; $(document).ready(function () { OverFouse(); }) function OverFouse() { //OverFouse将class属性为".rightMenuContent"的背景色设为#aaaaaa $(".rightMenuContent").css({ 'background-color': '#aaaaaa' }); var myApp = url.split("=")[1]; //拆分"?App=XXXX" if (myApp == null) {//初始和ASP.NET $("#aspnet").css({ 'background-color': '#27048b' }) $(".mainContent").html("<div style='color:red' align='center'>ASP.NET</div>"); } if (myApp == "asp") {//ASP $("#asp").css({ 'background-color': '#27048b' }) $(".mainContent").html("<div style='color:red' align='center'> ASP</div>"); } if (myApp == "jsp") {//JSP $("#jsp").css({ 'background-color': '#27048b' }) $(".mainContent").html("<div style='color:red' align='center'>JSP</div>"); } if (myApp == "php") {//PHP $("#php").css({ 'background-color': '#27048b' }) $(".mainContent").html("<div style='color:red' align='center'>PHP</div>"); } } </script>
免费
Javascript获取url参数动态页面 (24)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .