Question

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

我正在尝试创建一个简单的多标签，隐藏/显示div而不使用jquery。代码越短越好。谢谢！

Answer 1

我添加了一个小提琴。试试：

<强> 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/

简单的多标签隐藏/显示DIV

4 个答案: