DreamWeaver里面写的html文件中 怎么使用JavaScript根据用户点击一个按钮,在列表框显示内容
这是我在DreamWeaverCS5.5中设计的界面，我想知道怎么实现这样子的功能：点击“猪肉”按钮，就可以在下面的那个列表框加入我想要显示的跟猪肉相关的信息。一直不懂怎...
这是我在DreamWeaver CS5.5中设计的界面，我想知道怎么实现这样子的功能：点击“猪肉”按钮，就可以在下面的那个列表框加入我想要显示的跟猪肉相关的信息。一直不懂怎么弄，求大家帮个忙，谢谢
展开
展开全部
function a() {
document.getElementById('aa').style.display='block';
document.getElementById('bb').style.display='none';
document.getElementById('cc').style.display='none';
}
function b() {
document.getElementById('bb').style.display='block';
document.getElementById('aa').style.display='none';
document.getElementById('cc').style.display='none';
}
function c() {
document.getElementById('cc').style.display='block';
document.getElementById('bb').style.display='none';
document.getElementById('aa').style.display='none';
}<button id="a" onclick="a()">a</button>
<button id="b" onclick="b()">b</button>
<button id="c" onclick="c()">c</button>
<div id="aa" style="display:none;">aaaa</div>
<div id="bb" style="display:none;">bbbb</div>
<div id="cc" style="display:none;">cccc</div>
更多追问追答
追问
你好，我想问 document.getElementById('bb').style.display='block';是有什么作用呢？我没学过javascript
追答
这段代码的意思是把id为bb的元素的display的样式改为block，也就是使其可见。建议你去w3c看看，先去学学基础
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.btn{background:yellow;}
div{display:none;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var aBtn=oDiv.getElementsByTagName("input");
var aDiv=oDiv.getElementsByTagName("div");
for(var i=0;i<aBtn.length;i++){
aBtn[i].delet=i;
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className="";
aDiv[i].style.display="none";
}
this.className="btn";
aDiv[this.delet].style.display="block";
}
}
}
</script>
</head>
<body>
<div style="display:block">
<input type="button" value="1" class="btn"/>
<input type="button" value="1"/>
<input type="button" value="1"/>
<input type="button" value="1"/>
<input type="button" value="1"/>
<div style="display:block;">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
</div>
楼主 看下这样的效果是否符合你的要求
.btn{background:yellow;}
div{display:none;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var aBtn=oDiv.getElementsByTagName("input");
var aDiv=oDiv.getElementsByTagName("div");
for(var i=0;i<aBtn.length;i++){
aBtn[i].delet=i;
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className="";
aDiv[i].style.display="none";
}
this.className="btn";
aDiv[this.delet].style.display="block";
}
}
}
</script>
</head>
<body>
<div style="display:block">
<input type="button" value="1" class="btn"/>
<input type="button" value="1"/>
<input type="button" value="1"/>
<input type="button" value="1"/>
<input type="button" value="1"/>
<div style="display:block;">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
</div>
楼主 看下这样的效果是否符合你的要求
追问
是啊 ，但是我不太明白函数function（）的的每一句的意思，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用Ifrom，又叫网页页中页
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
建议去学一下javascript和css
你学会了就知道怎么做了。
你学会了就知道怎么做了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
