簡單的多標籤隱藏/顯示DIV

Question

概述：http://i.stack.imgur.com/8ManD.png

我試圖創建一個簡單的多標籤，隱藏/顯示div的不使用jQuery。代碼越短越好。謝謝！

Answer 1

我加了小提琴。試試：

http://jsfiddle.net/y76k4/

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); 
} 

Answer 2

您可以使用CSS3的所有現代瀏覽器創建它。看看here。將link添加到demo。

Answer 3

This is the best method我發現個人這樣做的。相對簡單的實施。

Answer 4

有隻用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/