0
A
回答
4
我加了小提琴。试试:
HTML:
<div width="100%">
<span id='sel1' onclick="show('sel1','resultsel1');">home</span><span id='sel2' onclick="show('sel2','resultsel2');">div1</span><span id='sel3' onclick="show('sel3','resultsel3');">div2</span></div>
<div id="resultsel1">Home Page</div>
<div id="resultsel2">div2</div>
<div id="resultsel3">div3</div>
的Javascript:
var selected="sel1";
var disp="resultsel1";
function show(a,b)
{
document.getElementById(selected).style.backgroundColor = "rgb(150,150,150)";
document.getElementById(disp).style.display = "none";
document.getElementById(a).style.backgroundColor = "rgb(200,200,200)";
document.getElementById(b).style.display = "block";
selected=a;
disp=b;
}
CSS:
#sel1{
cursor:pointer;
background-color:rgb(200,200,200);
padding-left:13px;
padding-right:13px;
}
#sel2{
cursor:pointer;
background-color:rgb(150,150,150);
padding-left:13px;
padding-right:13px;
}
#sel3{
cursor:pointer;
background-color:rgb(150,150,150);
padding-left:13px;
padding-right:13px;
}
#resultsel1{
display:block;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
#resultsel2{
display:none;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
#resultsel3{
display:none;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
0
0
This is the best method我发现个人这样做的。相对简单的实施。
0
有只用HTML和JS的解决方案:
HTML:
<a href="#" id="div1">Home</a> | <a href="#" id="div2">Div 2</a> | <a href="#" id="div3">Div 3</a>
<div id="container">
There's the home contents!
</div>
的Javascript:
window.load = function() {
var div1 = document.getElementById('container').innerHTML;
var div2 = "There's the div 2 contents!";
var div3 = "There's the div 3 contents!";
document.getElementById('div1').onclick = function() {
document.getElementById('container').innerHTML = div1;
}
document.getElementById('div2').onclick = function() {
document.getElementById('container').innerHTML = div2;
}
document.getElementById('div3').onclick = function() {
document.getElementById('container').innerHTML = div3;
}
}
AAAND有小提琴:http://jsfiddle.net/wuyXm/1/
相关问题
- 1. 隐藏/显示div标签
- 2. jquery,显示/隐藏div,问题标签
- 3. 隐藏并显示div标签
- 4. 远程显示和隐藏div标签
- 5. 显示/隐藏div标签javascript
- 6. 隐藏/显示多个WTForm标签
- 7. jquery多DIV隐藏/显示
- 8. 显示隐藏多个div
- 9. C# - 隐藏表单,只显示标签?
- 10. 显示/隐藏标签
- 11. 显示和隐藏标签
- 12. angularjs显示/隐藏标签
- 13. 可以JQGrid表单编辑Div标签隐藏和显示?
- 14. 隐藏和显示多个div并使用jQuery隐藏标题
- 15. 简单的div隐藏或基于菜单选择显示
- 16. 显示和隐藏多个div jquery显示/隐藏/切换
- 17. 当我显示div时,隐藏的div-img隐藏不显示
- 18. 显示/隐藏DIV
- 19. div显示/隐藏
- 20. 显示/隐藏div
- 21. 显示/隐藏Div
- 22. 隐藏/显示DIV
- 23. 隐藏取消隐藏div标签
- 24. 显示/隐藏多个div与多选
- 25. 简单的jQuery显示/隐藏表
- 26. 简单的jQuery显示/隐藏
- 27. 显示/隐藏的链接多个div
- 28. 显示/隐藏多个div的
- 29. Javascript显示/隐藏多个DIV的
- 30. 多个div隐藏显示的jQuery
你有任何代码吗? – Babblo
你能告诉我们你做了什么吗? – FBHY