在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段代码。
<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"。
<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>