CSS Code
.show{
display:block;
}
.hide{
display:none;
}
JS Code
<script type=”text/javascript”>
function ShowAndHide(show,hide)
{
document.getElementById(show).style.display = “block”;
document.getEletemtById(hide).style.display = “none”;
return false; //then the tag a will not execute.
//Also you can use the attribute -- className
// document.getElementById(show).className = “show”;
// document.getEletemtById(hide).className = “hide”;
}
</script>
Html Code
<body>
<ul>
<!--don’t set the attribute href’ value of a,it will cause refresh even if you set it as ‘#’-->
<li><a οnclick=”ShowAndHide(‘imgPanel’,’wordPanel’)”>image</a></li>
<li><a οnclick=”ShowAndHide(‘wordPanel’,’imgPanel’)”>word</a></li>
</ul>
<div id=”imgPanel”>
html code to show image…
</div>
<div id=”wordPanel” style=”display:none;”> <!--the default mode is hide-->
html code to show word…
</div>
</body>
扫一扫
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
