用JS实现页内动态切换DIV的内容

来源：互联网发布：算法设计中文版编辑：程序博客网时间：2024/05/16 19:42

用JS实现页内动态切换DIV的内容

设想：无需页面跳转，仅通过当页提供的锚动态改变指定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;'onclick=javascript:show(" + i + ");this.style.color='#ddd'; name=" + i + ">" + j + "</a> ");
}
document.write("组");

function show(idx){
    document.getElementById("middle").innerHTML=text[idx];
}

</script>

#js学习资料

0 0