无纸化教育传媒 伴随着您成长 伴随着您进步
首页 > 下载 > 下载详文：Javascript获取url参数动态页面

Javascript获取url参数动态页面

发布时间：2011年05月07日 09时20分28秒   属性：程序Web开发 > Javascript/Html    访问次数：102735
字体：大 初始 小 简 繁 添加收藏 分享给好友
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 下载许可条款 ( 您必须接受同意才可下载 ) .