设想:无需页面跳转,仅通过当页提供的锚动态改变指定div内的内容。
思路:可利用getElementById方法加以实现。getElementById通过id属性捕获或赋值给网页特定元素的相关资讯,如innerHTML(内部的html超文本)、innerTEXT(内部的text纯文本)等。其语法结构为:document.getElementById(v).innerHTML,“v”为特定元素的id标识,用时需要小角引号将其括起来。
例如,假设有一个id标识为middle的div,我们可以通过以下JS代码获得它的内容:
str=document.getElementById('middle').innerHTML; //str将是div里的HTML代码
同样的,我们也可以通过JS改变div的内容(即赋新值给它):
str="Hello Javascript!";
document.getElementById('middle').innerHTML=str;
这样,id标识为middle的div内部的内容将是“Hello Javascript!”,原来的内容(如果有)已经被刷新。
下面给出简单的代码和演示范例:
<div id="middle">DIV内容更新测试:点击以下链接,这里的内容将被刷新!</div>
<script language="javascript">
var text=new Array(); //定义需要显示的数组
text[0]="内容一:政治纪律";
text[1]="内容二:组织纪律";
text[2]="内容三:经济工作纪律";
text[3]="内容四:群众工作纪律";
document.write("<br>第 ");
for(i=0;i<text.length;i++){
j=i+1;
document.write("<a style='cursor:hand;'οnclick=javascript:show(" + i + ");this.style.color='#ddd'; name=" + i + ">" + j + "</a> ");
}
document.write("组");
function show(idx){
document.getElementById("middle").innerHTML=text[idx];
}
</script>