[英]Simple multi-tab hide/show DIV
我加了一個小提琴。嘗試:
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);
}
僅有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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.