UC知道帮忙解答下简单的javascript代码 ，鼠标点击主题显示不同主题内容，谢谢。
来源：百度知道 编辑：UC知道 时间：2024/06/26 00:54:21
我的网站布局较小，所以想利用脚本在一个大栏内放置两栏的内容。
一个大栏内有两主题。 想实现点击某一主题 显示内容就不同。要求两主题内容都在同一内容范围内。
下面的代码可以实现，但我不明白为什么不可以重要多次使用？（多个大栏）
原本我以为修改把
下面代码的中“ id" 修改为“class”就可以了，因为css中clsss可以重复使用.. 但是不行。
我不懂javascript。。 所以想请教下大家。如何能把下面这代码重复使用... 谢谢了
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function showpanel(id)
{
switch (id)
{
case 1:
$("p1").style.display="block";
$("p2").style.display="none";
break;
case 2:
$("p2").style.display="block";
$("p1").style.display="none";
break;
}
}
</script>
<div >
<div onclick="showpanel(1)" >主题标题1</div>
<div onclick="showpanel(2)" >主题标题2</div>
<div cl
一个大栏内有两主题。 想实现点击某一主题 显示内容就不同。要求两主题内容都在同一内容范围内。
下面的代码可以实现，但我不明白为什么不可以重要多次使用？（多个大栏）
原本我以为修改把
下面代码的中“ id" 修改为“class”就可以了，因为css中clsss可以重复使用.. 但是不行。
我不懂javascript。。 所以想请教下大家。如何能把下面这代码重复使用... 谢谢了
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function showpanel(id)
{
switch (id)
{
case 1:
$("p1").style.display="block";
$("p2").style.display="none";
break;
case 2:
$("p2").style.display="block";
$("p1").style.display="none";
break;
}
}
</script>
<div >
<div onclick="showpanel(1)" >主题标题1</div>
<div onclick="showpanel(2)" >主题标题2</div>
<div cl
function showpanel(id1,id2)
{
document.getElementById(id1).style.display="block";
document.getElementById(id2).style.display="none";
}
主要在此处,此处才是真正让它显示和隐藏的,
你把p1改成你要实现的层名就可以了,none为不显示,block为显示,你把showpanel(id)这个方法改一下,把id改成string型,也就是可以真接传id名,也就是这样调用
<div >
<div onclick=showpanel("p1","p2") >主题标题1</div>
<div onclick=showpanel("p2","p1") >主题标题2</div>
<div class="clear"></div>
当然这是比较简单的实现两个层,要是有三个层的话用这种方法还是比较麻烦的,三层以上的话,你可以改成显示某个层,只传一个参数进去,而其他的层设为隐藏.
<div onclick="showpanel(1)" >主题标题二 1</div>
注意里面的参数1
你应该用3和4了，对应下面的内容的id也应该是
<ul id="p3" style="display:block;">
<ul id="p4" style="display:block;"> >
可以同时定义一个Class和一个ID，这样就行了，ID在一个页面中一般是不允许重复的。
另：CSS可针对ID进行定义，如想定义ID为abc的内容背景为红色，只要这样定义就行：