简单的多选项卡隐藏/显示DIV

Question

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

我试图创建一个简单的多选项卡，在不使用jquery的情况下隐藏/显示div。代码越短越好。谢谢

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为所有现代浏览器创建它。看看这里。添加演示链接。

Answer 3

这是我个人发现的最好的方法。实现起来相对简单。

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

还有小提琴：http://jsfiddle.net/wuyXm/1/