第一个方法:
<%@ 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>jj</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>