javascript实现点击左边链接右边显示内容具体代码
你是想实现类似程序查看电子书或chm电子书查看网页的效果吗？
可以用<span>标签和Jscript的innerText来实现了。
很简单思路是用<u onclick=""></u>来做个响应单击事件的假超链接，再用Jscript改变一个既已存在的<span>的innerText。代码如下：
<span id="mk_l" style="border:0 solid gray;width:200;height:1em;background:#eee;"><!--这里是假的超链接组-->
<u onclick="mk_r.innerText='[你要显示的字1]'">假链接1</u><br>
<u onclick="mk_r.innerText='[你要显示的字2]'">假链接2</u><br>
<u onclick="mk_r.innerText='[你要显示的字3]'">假链接3</u><br>
<u onclick="mk_r.innerText='[你要显示的字4]'">假链接4</u><br>
<u onclick="mk_r.innerText='[你要显示的字5]'">假链接5</u><br>
<u onclick="mk_r.innerText='[你要显示的字6]'">假链接6</u><br>
<u onclick="mk_r.innerText='[你要显示的字7]'">假链接7</u><br>
</span>
<span id="mk_r" style="border:0 solid gray;width:760;height:200;background:#eee;margin-left:1em;vertical-align:top;">
</span>
点击链接时候-》用js函数处理-》函数使用ajax请求服务器，并设置一个接受数据的函数等待服务器响应-》服务器响应，将相应数据传到界面-》等待数据的函数执行，通过document对象获得界面相关标签，利用标签的innerText或则innerHtml 设置内容
给你一个参考代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://192.168.0.222:80/ajax/">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script>
var ajax;
function createAjaxObject()
{
//判断浏览器，执行对应的创建
if (window.ActiveXObject)
{
//写ie5 5.5 6.0创建ajax对象的代码
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
//ie7 ie8 firefox等创建ajax对象的代码
ajax = new XMLHttpRequest();
}
checkUsername();
}
function $(cid)
{
var val = document.getElementById(cid).value;
return encodeURIComponent(val);
}
function checkUsername()
{
var url = "Test?username=" + $('cname') + "&random=" + Math.random();
//1、打开ajax链接
//参数1可以是post或者get
//参数2可以检查用户名是否有效的action或者servlet的地址
//是否使用异步操作，true使用，false不使用
ajax.open("get",url,true);
//2、注册一个回调函数给ajax对象
ajax.onreadystatechange = myFun;
//3、发送请求,如果是get请求，传递null值。如果是post服务。下面传递参数名=参数值
ajax.send(null);
window.setTimeout(checkUsername,3000);
}
function myFun()
{
//判断ajax的请求状态0、1、2、3还在请求中
if (4 == ajax.readyState)
{
//判断响应状态码为200
if (200 == ajax.status)
{
//接受后台响应的纯文本
var msg = ajax.responseText;
document.getElementById("nameMsg").innerHTML="<font color=red>" + msg +"</font>";
}
}
}
</script>
</head>
<body onLoad="createAjaxObject();">
<form action="aa" method="post">
<input type="text" id="cname" name="username"/><span id="nameMsg"/></span>
<br/>
<input type="password" name="password"/>
<br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
服务器短的内容用用response.getWriter().println(); 方法返回即可
<a href="A.html" target="right">左边</a>
<iframe name="right" width="100%" height="600px"></iframe>
就是左边一个文字连接，然后点击右边就可以显示相应的文字内容。最好是用javascript和html做的
谢谢
你要说具体点,你文字内容是什么?
如果是网页的话,用我就可以了,如果只是文字而已,那就用三楼,我帮你改下:
左边
function DispalyContent(obj)
{
labelContent.innerHTML=obj.innerHTML; //也可以是你指定的文字!
}
