javascript - 显示：无/块样式选项卡菜单创建与按钮和 Javascript

Question

function tab_menu(){ 
  if (buttonObject.value == value){
    document.getElementById("div1").style.display = "block";
  }
}

我正在尝试单击按钮检查按钮值并根据按钮的值显示一个 div 并隐藏其他 div 它应该同时只显示一个 div。我想知道有一个javascript大师可以解决这个问题。

Answer 1

脚本：

function tabmenu(buttonObject){ 
    var value = buttonObject.value
    var target = document.getElementById(value);

    if(target) {
       var siblings = target.parentNode.getElementsByTagName("DIV");
       for(i=0;i<siblings.length;i++){
          siblings[i].style.display = "none";
       }
       target.style.display = "block";
    }

}

HTML：

<div>
    <div id="tab1">Tab1</div>
    <div id="tab2">Tab2</div>
    <div id="tab3">Tab3</div>
</div>

<button onclick="tabmenu(this);" value="tab1">Tab1</button>
<button onclick="tabmenu(this);" value="tab2">Tab2</button>

1. 找到要激活的选项卡（假设 value = tab.id）
2. 找到父母，因此它是兄弟姐妹（假设他们是DIV）
3. 隐藏兄弟姐妹
4. 显示目标

你可以看到它在这里工作：http: //jsfiddle.net/4rWdQ/