html页面的状态栏切换

第一个方法:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海银基金-基金产品-基金经理</title>
<script src="../js/jquery-1.3.1.js"></script>
<style>
.m{color:red}
</style>
<script type="text/javascript">
   function showdiv(cc,count){
       for(var i=1;i<4;i++){
           var obj=$("#"+cc+i);
           obj.removeClass("m");
           var obj2=$("#show_"+i);
           obj2.hide();
       }
       var obj3=$("#"+cc+count);
       obj3.addClass("m");
       var obj4=$("#show_"+count);
       obj4.show();
   }

</script>
</head>
<body>
<ul>
<li class="m" id="jj_1" onclick="showdiv(‘jj_‘,‘1‘);"><span>基金经理</span></li>
<li id="jj_2" onclick="showdiv(‘jj_‘,‘2‘);"><span>基金公司</span></li>
<li id="jj_3" onclick="showdiv(‘jj_‘,‘3‘);"><span>基金</span></li>
</ul>
<div id="show_1" style="display:">基金经理显示div</div>
<div id="jjshow"></div>

<div id="show_2" style="display:none">基金公司显示div</div>
<div id="show_3" style="display:none">基金显示div</div>
</body>
</html>




第二个方法:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>海银基金-基金产品-基金经理</title>
       <script src="../js/jquery-1.3.1.js">
</script>
       <style>
.m {
   color: red
}
</style>
       <!--先判断点击的那个节点跟我要显示的div对应上;
然后再点击的节点显示出来,其他的隐藏起来 ;
还可以在加载这个jsp的时候load异步一个jsp页面过来 -->
       <script type="text/javascript">
$(function() {
   alert(window.location.href);
   alert(getUrlParam("u"));
   arr = [ "#jjjlxs", "#jjgsxs", "#jjxs" ];
   $("ul li").click(function() {
       t = $(this);
       $.each(arr, function(index, val) {
           if (t.attr("id") == ($(val + "dh").attr("id"))) {
               t.addClass("m");
               $(val).show();
           } else {
               $(val + "dh").removeClass("m");
               $(val).hide();
           }
       });

   });
});
//获取url的参数的
function getUrlParam(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
   var r = window.location.search.substr(1).match(reg); //匹配目标参数
   if (r != null){
       return unescape(r[2]);
   }
   return null; //返回参数值
}
</script>
   </head>
   <body>
       <ul>
           <li class="m" id="jjjlxsdh">
               基金经理
           </li>
           <li id="jjgsxsdh">
               基金公司
           </li>
           <li id="jjxsdh">
               基金
           </li>
       </ul>

       <div id="jjjlxs" style="display: ">
           基金经理显示div
       </div>
       <div id="jjgsxs" style="display: none">
           基金公司显示div
       </div>
       <div id="jjxs" style="display: none">
           基金显示div
       </div>
   </body>
</html>


html页面的状态栏切换,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。